JavaScript簡單實現(xiàn)動態(tài)改變HTML內(nèi)容的方法示例

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

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

本文實例講述了JavaScript簡單實現(xiàn)動態(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 = "歡迎訪問腳本之家 www.dhdzp.com";//改變內(nèi)容
      x.style.color="#ff0000"; //改變樣式
    }
  </script>
</head>
<body>
<p id="demo">js能夠改變html元素的內(nèi)容。</p>
<button type="button" onclick="myFunction()">點擊這里</button>
</body>
</html>

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

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

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

您可能感興趣的文章:

相關(guān)文章

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