快捷導(dǎo)航

JavaScript簡(jiǎn)單實(shí)現(xiàn)動(dòng)態(tài)改變HTML內(nèi)容的方法示例

更新時(shí)間：2018年12月25日 11:07:53 作者：ChouCat

這篇文章主要介紹了JavaScript簡(jiǎn)單實(shí)現(xiàn)動(dòng)態(tài)改變HTML內(nèi)容的方法,結(jié)合實(shí)例形式分析了javascript簡(jiǎn)單獲取及修改HTML元素的相關(guān)操作技巧,非常簡(jiǎn)單易懂,需要的朋友可以參考下

本文實(shí)例講述了JavaScript簡(jiǎn)單實(shí)現(xiàn)動(dòng)態(tài)改變HTML內(nèi)容的方法。分享給大家供大家參考，具體如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JavaScript：改變 HTML 內(nèi)容</title>
  <script>
    function myFunction() {
      x = document.getElementById("demo");
      console.dir(x);
      x.innerHTML = "歡迎訪問(wèn)腳本之家 m.fzitv.net";//改變內(nèi)容
      x.style.color="#ff0000"; //改變樣式
    }
  </script>
</head>
<body>
<p id="demo">js能夠改變html元素的內(nèi)容。</p>
<button type="button" onclick="myFunction()">點(diǎn)擊這里</button>
</body>
</html>

這里使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試運(yùn)行上述代碼，可得到如下運(yùn)行結(jié)果：

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript操作DOM技巧總結(jié)》、《JavaScript頁(yè)面元素操作技巧總結(jié)》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

JavaScript函數(shù)重載操作實(shí)例淺析
這篇文章主要介紹了JavaScript函數(shù)重載操作,結(jié)合一次面試經(jīng)歷分析了JavaScript函數(shù)重載相關(guān)原理、用法及操作注意事項(xiàng),需要的朋友可以參考下
2020-05-05
JS異步宏隊(duì)列與微隊(duì)列原理區(qū)別詳解
這篇文章主要介紹了JS異步宏隊(duì)列與微隊(duì)列原理區(qū)別詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-07-07
小程序?qū)崿F(xiàn)手寫板簽名
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)手寫板簽名，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
利用js+canvas實(shí)現(xiàn)掃雷游戲
這篇文章主要為大家詳細(xì)介紹了利用js+canvas實(shí)現(xiàn)掃雷游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-06-06
第二篇Bootstrap起步
這篇文章主要介紹了第二篇Bootstrap起步的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-06-06
javascript和jQuery中的AJAX技術(shù)詳解【包含AJAX各種跨域技術(shù)】
這篇文章主要介紹了javascript和jQuery中的AJAX技術(shù),結(jié)合實(shí)例形式分析了javascript與jQuery中ajax的實(shí)現(xiàn)方法以及AJAX各種跨域技術(shù)的原理與操作技巧,需要的朋友可以參考下
2016-12-12
JS中JSON對(duì)象和String之間的互轉(zhuǎn)及處理技巧
JSON：JavaScript 對(duì)象表示法（JavaScript Object Notation），其實(shí)JSON就是一個(gè)JavaScript的對(duì)象(Object)而已。接下來(lái)通過(guò)本文給大家介紹JS中JSON對(duì)象和String之間的互轉(zhuǎn)及處理技巧，需要的朋友一起學(xué)習(xí)吧
2016-04-04
JavaScript實(shí)現(xiàn)五子棋游戲的方法詳解
這篇文章主要介紹了JavaScript實(shí)現(xiàn)五子棋游戲的方法,結(jié)合實(shí)例形式詳細(xì)分析了javascript實(shí)現(xiàn)五子棋游戲的具體步驟、原理與相關(guān)操作技巧,需要的朋友可以參考下
2019-07-07
JS來(lái)動(dòng)態(tài)的修改url實(shí)現(xiàn)對(duì)url的增刪查改
通過(guò)get方式提交post表單等方式來(lái)動(dòng)態(tài)修改url存在諸多的不妥，因此，想到了通過(guò)JS來(lái)動(dòng)態(tài)的修改url，來(lái)實(shí)現(xiàn)對(duì)url的增刪查改
2014-09-09
js在HTML的三種引用方式詳解
這篇文章主要介紹了js在HTML的三種引用方式詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-08-08