快捷導(dǎo)航

JS把內(nèi)容動態(tài)插入到DIV的實(shí)現(xiàn)方法

更新時(shí)間：2016年07月19日 10:07:58 投稿：jingxian

下面小編就為大家?guī)硪黄狫S把內(nèi)容動態(tài)插入到DIV的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

<!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)載入另一個(gè)頁面非常相似！

以上這篇JS把內(nèi)容動態(tài)插入到DIV的實(shí)現(xiàn)方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

通過身份證號得到出生日期和性別的js代碼
主要是通過判斷指定位數(shù)的數(shù)字，來判斷并加以算法實(shí)現(xiàn)男女性別的判斷。
2009-11-11
理解Javascript的動態(tài)語言特性
這篇文章主要介紹了理解Javascript的動態(tài)語言特性,需要的朋友可以參考下
2015-06-06
JS中實(shí)現(xiàn)隱藏部分姓名或者電話號碼的代碼
最近做了小項(xiàng)目，項(xiàng)目需要只顯示用戶的姓名和手機(jī)號開頭跟結(jié)尾，其他部分用*號代替，下面小編給大家分享一段簡單的代碼，需要的朋友跟隨腳本之家小編一起看看吧
2018-07-07
判斷JavaScript對象是否可用的最正確方法分析
在調(diào)試JavaScript的過程中，你是不是經(jīng)常會遇到object undefined的問題呢？你平時(shí)是怎樣來測試對象是否存在呢？判斷瀏覽器版本？判斷JavaScript版本？本文來告訴你正確的方法。這篇文章涉及的瀏覽器可能古老一些，但是闡述的道理確實(shí)適合現(xiàn)在使用的。
2008-10-10
Firefox下提示illegal character并出現(xiàn)亂碼的原因
Firefox下提示illegal character并出現(xiàn)亂碼的問題，時(shí)間是是因?yàn)榫幋a的問題導(dǎo)致。
2010-03-03
JS中promise化微信小程序api
這篇文章主要給大家通過代碼實(shí)例分析了promise化微信小程序api的使用方法，對此有需要的朋友可以參考學(xué)習(xí)下。
2018-04-04
時(shí)間處理工具?dayjs使用示例詳解
這篇文章主要為大家介紹了時(shí)間處理工具?dayjs使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-10-10
詳解如何解決使用JSON.stringify時(shí)遇到的循環(huán)引用問題
這篇文章主要介紹了詳解如何解決使用JSON.stringify時(shí)遇到的循環(huán)引用問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-03-03
Javascript 正則表達(dá)式實(shí)現(xiàn)為數(shù)字添加千位分隔符
在項(xiàng)目中做貨幣轉(zhuǎn)換的時(shí)候經(jīng)常需要可以實(shí)現(xiàn)自動格式化輸入的數(shù)字，自動千位分隔符，在網(wǎng)上也看到一些其他網(wǎng)友的實(shí)現(xiàn)的代碼，感覺都不是太滿意，于是自己研究了下，分享給大家。
2015-03-03
Javascript類庫的頂層對象名用戶體驗(yàn)分析
針對jQuery、Ext、KISSY三者類庫的對比及分析已經(jīng)很多了，但多數(shù)是從功能和設(shè)計(jì)的角度切入，因此本篇文章決定換一個(gè)特殊的角度，從各類庫的頂層對象名的鍵盤輸入的體驗(yàn)上來對這三個(gè)類庫進(jìn)行比較。
2010-10-10