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)文章
基于JavaScript實(shí)現(xiàn)文件秒傳功能
在互聯(lián)網(wǎng)高速發(fā)展的今天，文件上傳已經(jīng)成為網(wǎng)頁(yè)應(yīng)用中的一個(gè)基本功能，隨著用戶上傳文件尺寸的不斷增大、對(duì)質(zhì)量清晰度的要求也越來(lái)越高，所以本文給大家介紹了如何使用JavaScript實(shí)現(xiàn)文件秒傳功能,需要的朋友可以參考下2024-01-01
JavaScript實(shí)現(xiàn)頁(yè)面中錄音功能的方法
這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)現(xiàn)頁(yè)面中錄音功能的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
這篇文章主要介紹了Object.keys方法實(shí)例詳解,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-09-09
JavaScript中字符串GBK與GB2312的編解碼示例講解
在瀏覽器JavaScript環(huán)境中,可以使用TextEncoder和TextDecoder?API?來(lái)進(jìn)行?GBK?編碼和解碼,也可以使用?encodeURIComponent?函數(shù)對(duì)字符串進(jìn)行編碼,最好使用第三方庫(kù),比如iconv-lite來(lái)實(shí)現(xiàn)2023-12-12
JavaScript封裝Vue-Router實(shí)現(xiàn)流程詳解
這篇文章主要介紹了JavaScript封裝Vue-Router實(shí)現(xiàn)流程，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-09-09
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)車輛管理系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
這篇文章主要介紹了移動(dòng)前端開發(fā)之viewport的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-10-10
這篇文章主要介紹了前端JS經(jīng)典問(wèn)題之跨域的解決方案,文中主要講了瀏覽器的同源策略、跨域限制以及解決跨域的幾種方法,包括CORS、JSONP和配置代理等,需要的朋友可以參考下2024-11-11
JavaScript實(shí)現(xiàn)LRU緩存的三種方式詳解
LRU全稱為L(zhǎng)east?Recently?Used，即最近使用的。針對(duì)的是在有限的內(nèi)存空間內(nèi)，只緩存最近使用的數(shù)據(jù)（即get和set的數(shù)據(jù)）。本文介紹了JavaScript實(shí)現(xiàn)LRU緩存的三種方式，需要的可以參考一下2022-06-06
這篇文章主要介紹了js實(shí)現(xiàn)3D照片墻效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10