JS把內(nèi)容動態(tài)插入到DIV的實現(xiàn)方法
更新時間：2016年07月19日 10:07:58 投稿：jingxian
下面小編就為大家?guī)硪黄狫S把內(nèi)容動態(tài)插入到DIV的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Testing</title> </head> <script type="text/javascript" src="example.js"> </script> <body> <div id="testdiv"> </div> </body> </html>
example.js 文件內(nèi)容：
window.onload = function() {
var testdiv = document.getElementById("testdiv");
testdiv.innerHTML="<p>I inserted <em>this</em> content.</p>";
}
另一段代碼：
window.onload = function() {
var para = document.createElement("p");
var txt1 = document.createTextNode("I inserted ");
var emphasis = document.createElement("em");
var txt2 = document.createTextNode("this");
var txt3 = document.createTextNode(" content.");
para.appendChild(txt1);
emphasis.appendChild(txt2);
para.appendChild(emphasis);
para.appendChild(txt3);
var testdiv = document.getElementById("testdiv");
testdiv.appendChild(para);
}
這與在DIV內(nèi)動態(tài)載入另一個頁面非常相似！
以上這篇JS把內(nèi)容動態(tài)插入到DIV的實現(xiàn)方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 基于javascript實現(xiàn)按圓形排列DIV元素(一)
- javascript實現(xiàn)鼠標(biāo)點(diǎn)擊頁面 移動DIV
- JS控制div跳轉(zhuǎn)到指定的位置的幾種解決方案總結(jié)
- js實現(xiàn)非常棒的彈出div
- 完美的js div拖拽實例代碼
- 基于JavaScript實現(xiàn)鼠標(biāo)向下滑動加載div的代碼
- AngularJS動態(tài)生成div的ID源碼解析
- JS獲取一個未知DIV高度的方法
- JavaScript鼠標(biāo)事件,點(diǎn)擊鼠標(biāo)右鍵,彈出div的簡單實例
- js動態(tài)添加的DIV中的onclick事件簡單實例
- js 動態(tài)添加元素(div、li、img等)及設(shè)置屬性的方法
- 基于javascript實現(xiàn)按圓形排列DIV元素(二)
相關(guān)文章
JavaScript基于Dom操作實現(xiàn)查找、修改HTML元素的內(nèi)容及屬性的方法
這篇文章主要介紹了JavaScript基于Dom操作實現(xiàn)查找、修改HTML元素的內(nèi)容及屬性的方法,涉及javascript dom模型及事件響應(yīng)相關(guān)操作技巧,需要的朋友可以參考下2017-01-01
詳細(xì)分析Javascript中創(chuàng)建對象的四種方式
這篇文章詳細(xì)介紹了Javascript中創(chuàng)建對象的幾種方式與每種方式的優(yōu)缺點(diǎn)，其中包括工廠模式、構(gòu)造函數(shù)模式、原型模式和組合使用構(gòu)造函數(shù)模式和原型模式，有需要的小伙伴們一起來學(xué)習(xí)學(xué)習(xí)吧。2016-08-08
JavaScript 處理樹數(shù)據(jù)結(jié)構(gòu)的方法示例
這篇文章主要介紹了JavaScript 處理樹數(shù)據(jù)結(jié)構(gòu)的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-06-06
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)九宮格效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
這篇文章主要介紹了JavaScript中的類數(shù)組對象介紹,一個對象并不是由Array構(gòu)造函數(shù)所創(chuàng)建的,它依然呈現(xiàn)出數(shù)組的行為,在這種情況下,這些對象被稱為“類數(shù)組對象”,需要的朋友可以參考下2014-12-12
圖片輪換效果實現(xiàn)代碼(點(diǎn)擊按鈕停止執(zhí)行)
在這個實例中需要注意的是，要把images文件夾下圖片的命名設(shè)置為有順序的，1、2、3..才可以，感興趣的朋友可以參考下2013-04-04
搜索頁面內(nèi)容的js代碼，不過這效率不是很高，大篇幅內(nèi)容不建議使用。2009-12-12
JavaScript中for..in循環(huán)陷阱介紹
for...in循環(huán)中的循環(huán)計數(shù)器是字符串，而不是數(shù)字它包含當(dāng)前屬性的名稱或當(dāng)前數(shù)組元素的索引，下面有個不錯的示例大家可以參考下2013-11-11
JavaScript動態(tài)檢驗密碼強(qiáng)度的實現(xiàn)方法
平時我們會在某些網(wǎng)站的注冊頁面或者更改密碼的頁面發(fā)現(xiàn)當(dāng)我們輸入密碼時，會有一個類似于進(jìn)度條的長條進(jìn)行提示用戶輸入的密碼強(qiáng)度。那么這種效果怎么實現(xiàn)的呢？下面小編給大家介紹下js動態(tài)檢驗密碼強(qiáng)度的實現(xiàn)方法，一起看看吧2016-11-11
本篇文章主要介紹了微信小程序之多文件下載的簡單封裝示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01