快捷導(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 = "歡迎訪(fǎng)問(wèn)腳本之家 chabaoo.cn";//改變內(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>

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

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《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)文章

一段利用WSH獲取登錄時(shí)間的jscript代碼
用jscript實(shí)現(xiàn)獲取登錄時(shí)間的腳本
2008-05-05
教你javascript如何獲取指針的位置
這篇文章主要介紹了javascript獲取指針的位置的方法,通過(guò)代碼介紹了如何調(diào)用上面擴(kuò)展函數(shù) getMP() 捕獲當(dāng)前鼠標(biāo)指針在文檔中的位置，需要的朋友可以參考下
2021-10-10
使用js獲取當(dāng)前年月日的方法及格式整理匯總
很多時(shí)候我們需要在前臺(tái)獲取當(dāng)前日期,下面這篇文章主要給大家介紹了關(guān)于使用js獲取當(dāng)前年月日的方法及格式整理的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-12-12
在js代碼拼接dom對(duì)象到頁(yè)面上去的模板總結(jié)(必看)
下面小編就為大家?guī)?lái)一篇在js代碼拼接dom對(duì)象到頁(yè)面上去的模板總結(jié)(必看)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-02-02
基于JavaScript表單腳本(詳解)
下面小編就為大家?guī)?lái)一篇基于JavaScript表單腳本(詳解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-10-10
詳解JavaScript中常用操作符的使用
在 JavaScript 中，有一些操作符可以使代碼更簡(jiǎn)潔、易讀和高效。這篇文章為大家整理了11個(gè)JavaScript中常用操作符的使用，需要的可以參考一下
2023-04-04
JavaScript中原型鏈存在的問(wèn)題解析
本文通過(guò)實(shí)例給大家介紹js原型鏈存在的問(wèn)題解析，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧
2016-09-09
js判斷一個(gè)元素是否為另一個(gè)元素的子元素的代碼
用js判斷一個(gè)元素是否為另一個(gè)元素的子元素，再做一些效果的時(shí)候經(jīng)常用到，特別是和鼠標(biāo)事件相關(guān)的應(yīng)用中，比如一個(gè)浮層，在鼠標(biāo)操作浮層內(nèi)元素的時(shí)候浮層顯示，當(dāng)點(diǎn)擊浮層外的元素的時(shí)候隱藏浮層
2012-03-03
關(guān)于ckeditor在bootstrap中modal中彈框無(wú)法輸入的解決方法
今天小編就為大家分享一篇關(guān)于ckeditor在bootstrap中modal中彈框無(wú)法輸入的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-09-09
微信小程序scroll-view實(shí)現(xiàn)左右聯(lián)動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了微信小程序scroll-view實(shí)現(xiàn)左右聯(lián)動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09