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

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

下面小編就為大家?guī)硪黄狫S把內容動態(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 文件內容：

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內動態(tài)載入另一個頁面非常相似！

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

您可能感興趣的文章:

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