js使用文檔就緒函數(shù)動(dòng)態(tài)改變頁(yè)面內(nèi)容示例【innerHTML、innerText】
更新時(shí)間：2019年11月07日 11:08:46 作者：xuehyunyu
這篇文章主要介紹了js使用文檔就緒函數(shù)動(dòng)態(tài)改變頁(yè)面內(nèi)容,結(jié)合實(shí)例形式分析了JavaScript使用innerHTML、innerText函數(shù)動(dòng)態(tài)操作頁(yè)面元素相關(guān)使用技巧,需要的朋友可以參考下
本文實(shí)例講述了js使用文檔就緒函數(shù)動(dòng)態(tài)改變頁(yè)面內(nèi)容。分享給大家供大家參考，具體如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*文檔就緒函數(shù)*/
/*動(dòng)態(tài)修改網(wǎng)頁(yè)的內(nèi)容*/
window.onload = function () {
var d = document.getElementById('d');
//添加文本信息
d.innerHTML="hhhh";//添加文本信息或者標(biāo)簽
// d.innerText="kkkk";//添加文本信息
var abc = document.getElementsByName("abc");
//通過(guò)數(shù)組下標(biāo)得到對(duì)應(yīng)元素
abc[0].innerText='sssss'
//通過(guò)標(biāo)簽名字得到
var span = document.getElementsByTagName('span');
span[0].innerText='fffff'
//通過(guò)classname找對(duì)應(yīng)元素
var c=document.getElementsByClassName('c');
for (var i = 0;i<c.length;i++ ){
c[i].innerText='買買買'
}
}
</script>
</head>
<body>
<div id="d"></div>
<a href="js1.html" rel="external nofollow" name="abc">啦啦啦啦</a>
<span>
</span>
<p class="c">坎坎坷坷</p>
<p class="c">坎坎坷坷</p>
</body>
</html>
運(yùn)行效果：
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
更多關(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)文章
微信小程序?qū)崿F(xiàn)手機(jī)獲取驗(yàn)證碼倒計(jì)時(shí)60s
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)手機(jī)獲取驗(yàn)證碼后倒計(jì)時(shí)60s，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
JavaScript無(wú)操作后屏保功能的實(shí)現(xiàn)方法
今天組里的同事要寫一個(gè)屏保的效果，要求鼠標(biāo)無(wú)操作N秒后進(jìn)入屏幕保護(hù)，滑動(dòng)鼠標(biāo)的時(shí)候取消屏幕保護(hù)。我真是難倒了，糾結(jié)了半天，搞定了，下面給大家分享實(shí)現(xiàn)代碼2017-07-07
js中調(diào)用微信的掃描二維碼功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了在js中調(diào)用微信的掃描二維碼功能的實(shí)現(xiàn)代碼，本文給大家分享了注意事項(xiàng)及常見問(wèn)題分析，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04
詳解JavaScript中Math內(nèi)置對(duì)象基本方法的使用
Math?是javaScript的內(nèi)置對(duì)象，包含了部分?jǐn)?shù)學(xué)常數(shù)屬性和數(shù)學(xué)函數(shù)方法。本文將詳細(xì)講解Math基本方法的使用，感興趣的小伙伴可以學(xué)習(xí)一下2022-04-04
這篇文章主要介紹了js格式化時(shí)間的方法，對(duì)javascript時(shí)間格式化的方法進(jìn)行了總結(jié)，感興趣的小伙伴們可以參考一下2015-12-12
以前需要做一個(gè)數(shù)字輸入的InputBox,結(jié)果無(wú)奈需求太BT，搞得焦頭爛額，重做了無(wú)數(shù)次。無(wú)奈之下，再次Google，發(fā)現(xiàn)早有成熟的插件了(悶在家里造輪子果然不好啊)，autoNumeric使用方便，功能強(qiáng)大，現(xiàn)在介紹給大家，一個(gè)非常好的jquery plugin。2009-11-11
innerHTML動(dòng)態(tài)添加html代碼和腳本兼容多個(gè)瀏覽器
innerHTML動(dòng)態(tài)添加html代碼和腳本，給某個(gè)元素的innerHTML賦值,并使得值中的js代碼有效且兼容多個(gè)瀏覽器，很棒的一個(gè)方法2014-10-10
新年快樂(lè)! javascript實(shí)現(xiàn)超級(jí)炫酷的3D煙花特效
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)超級(jí)炫酷的3D煙花特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-01-01
這篇文章主要介紹了Bootstrap CDN和本地化環(huán)境搭建的方法，非常不錯(cuò)具有參考借鑒價(jià)值，感興趣的朋友跟著小編一起學(xué)習(xí)吧2016-10-10
這篇文章主要為大家詳細(xì)解析了JS組件Bootstrap Table使用方法，具有一定的實(shí)用性和參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11