蜜果私塾：DOM，黑色藝術(shù)的終結(jié)者（3）

——使用DOM動態(tài)創(chuàng)建HTML內(nèi)容

文：阿蜜果/2011-11-2

轉(zhuǎn)載請注明出處

1、不使用DOM的做法

網(wǎng)頁的結(jié)構(gòu)由HTML文檔負責(zé)創(chuàng)建，JavaScript函數(shù)只用來改變HTML文檔的某些細節(jié)而不改變其底層結(jié)構(gòu)，JavaScript也可以用來改變網(wǎng)頁的結(jié)構(gòu)和內(nèi)容。

創(chuàng)建HTML內(nèi)容的“老”技巧是使用document.write()方法和innerHTML屬性。

1.1 使用document.write()方法

document的write()方法可以方便快捷的將字符串插入到文檔中，如下面示例中在網(wǎng)頁上使用該方法顯示“使用write()方法輸出的內(nèi)容”：

<html>

<head>

<title>document.write()方法測試</title>

</head>

<body>

document.write("<p>使用write()方法輸出的內(nèi)容</p>");

</script>

</body>

<html>

使用document.write()方法的最大缺點是違背了“分離JavaScript”原則，當(dāng)然也可以將這一句提供一個公用的JS方法，放在一個獨立的js文件中，例如在example.js中編寫如下js方法：

function insertPara(content) {

var str = "<p>" + content + "</p>";

document.write(str);

}

將之前的HTML文件修改為如下內(nèi)容：

<html>

<head>

<title>document.write()方法測試</title>

</script>

</head>

<body>

insertPara("使用write()方法輸出的內(nèi)容");

</script>

</body>

<html>

但就算這樣做還是沒有解決“分離JavaScript”的問題，需要在<body>元素中插入JS代碼，使用document.write()動態(tài)構(gòu)建HTML內(nèi)容的缺點如下：

（1）將JavaScript和HTML代碼混雜在一起，使得HTML不容易編輯，也無法享受把行為和結(jié)構(gòu)分離出來的好處；

（2）這樣拼接HTML字符串很容易導(dǎo)致“數(shù)據(jù)/格式非法”的錯誤；

（3）MIME類型設(shè)置為application/xhtml+xml與document.write()方法不兼容，瀏覽器在呈現(xiàn)xhtml文檔時不會執(zhí)行document.write()方法。

1.2 使用innerHTML屬性

現(xiàn)在幾乎所有的瀏覽器都支持屬性innerHTML，但這個屬性并不是W3C DOM標準的組成部分，他初見于IE 4瀏覽器，被被其它瀏覽器所接受。

該屬性可用于讀、寫給定元素的HTML內(nèi)容，例如使用innerHTML屬性更新id為testdiv元素的HTML內(nèi)容為：“<p>測試<em>innerHTML</em>屬性</p>”，innerHtmlExample.js文件中的JS代碼如下：

window.onload = function() {

var testdiv = document.getElementById("testdiv");

testdiv.innerHTML = "<p>測試<em>innerHTML</em>屬性</p>";

}

對應(yīng)的HTML的代碼如下所示：

<html>

<head>

<title>innerHTML測試</title>

</script>

</head>

<body>

</div>

</body>

<html>

innerHTML屬性比document.write()方法更值得推薦，使用該屬性還可以遵循“分離JavaScript”的原則。在需要將一大段HTML代碼插入一份文檔，使用innerHTML屬性設(shè)置既簡單又快速，但是使用該屬性的缺點也很明顯：

（1）不會返回任何可以用來對剛插入的內(nèi)容進行處理的內(nèi)容，導(dǎo)致無法對剛插入的內(nèi)容進行處理，無法提供DOM的眾多操作功能；

（2）只使用于HTML文檔，在瀏覽器呈現(xiàn)xhtml文檔時不會執(zhí)行該屬性；

（3）是一項專利技術(shù)，而不是一項業(yè)界標準。

2、使用DOM動態(tài)創(chuàng)建HTML內(nèi)容

2.1 createElement()方法：創(chuàng)建元素

該方法用于創(chuàng)建一個元素節(jié)點，該方法返回一個Element對象，語法如下：

createElement(name)

其中name屬性是字符串值，用于為元素節(jié)點規(guī)定名稱。

【提示】如果name參數(shù)中含有不合法的字符，該方法將拋出代碼DOMException 異常，代碼為INVALID_CHARACTER_ERR 。

下面語句用于創(chuàng)建一個p元素：

document.createElement(“p”);

該方法常與而后說到的appendChild()和createTextNode()合作使用，這個方法單獨使用是沒有實際用處的，因為它并沒有將創(chuàng)建的元素插入到文檔中。使用該方法將創(chuàng)建出的元素賦予一個變量后，該變量指向剛創(chuàng)建出來的元素的引用指針。這個元素是具有自己的nodeType和nodeName，如下所示：

<html>

<head>

<title>createElement()方法測試</title>

var para = document.createElement("p");

alert("nodeName=" + para.nodeName + ", nodeType=" + para.nodeType);

</script>

</head>

<body>

</body>

<html>

測試時，提示框顯示信息為：

nodeName=P, nodeType=1

由此可知此時新節(jié)點已經(jīng)存在，并且從nodeType為1，可看出它是一個元素節(jié)點。

2.2 appendChild()方法：追加子節(jié)點

該方法指定元素節(jié)點的最后一個子節(jié)點之后添加節(jié)點，該方法返回新的子節(jié)點，語法：

parent.appendChild(node)

其中node參數(shù)為必填參數(shù)，表示要添加的節(jié)點。

例如我想將p元素添加到id為testdiv的div元素下去，參考代碼如下：

<html>

<head>

<title>appendChild()測試</title>

window.onload = function() {

var para = document.createElement("p");

var testdiv = document.getElementById("testdiv");

testdiv.appendChild(para);

}

</script>

</head>

<body>

</div>

</body>

<html>

2.3 createTextNode()方法：創(chuàng)建文本節(jié)點

在2.2小節(jié)中我們創(chuàng)建的是一個空白的p元素，若需要為p元素設(shè)置文本，需要使用createTextNode()方法創(chuàng)建一個文本節(jié)點。該方法的語法與createElement()方法類似：

document.createTextNode(text)

該方法返回Text對象，其中text參數(shù)為字符串值，可規(guī)定次節(jié)點的文本。例如創(chuàng)建“你好”的文本節(jié)點，語句如下：

document.createTextNode(“你好”);

可以將該方法返回的值賦給一個變量，那么這個變量將指向那個文本節(jié)點的引用指針。與createElement()方法相似，該方法也只是負責(zé)創(chuàng)建新的節(jié)點，但并不會加入到文檔中，需要使用appendChild()等方法加入。

改造2.2小節(jié)中實例，給p元素加上“你好”的文本，代碼參考如下：

<html>

<head>

<title>appendChild()測試</title>

window.onload = function() {

var para = document.createElement("p");

var txt = document.createTextNode("你好");

var testdiv = document.getElementById("testdiv");

para.appendChild(txt);

testdiv.appendChild(para);

}

</script>

</head>

<body>

</div>

</body>

<html>

【提示】因為變量里存儲的是引用指針，所以將上述代碼的兩句appendChild對換一下，也不會影響頁面的顯示。

2.4 insertBefore()方法：添加新節(jié)點到現(xiàn)有元素前

該方法可在已有的子節(jié)點插入一個新的子節(jié)點，它返回新的子節(jié)點。語法如下：

parentElement.inertBefore(newChild, refChild)

其中：

（1）parentElement：這兩個參數(shù)中指定的元素的父元素；

（2）newChild參數(shù)：表示插入新的節(jié)點；

（3）refChild參數(shù)：表示在此節(jié)點前插入新節(jié)點。

在如下實例中，首先在id為testdiv的div元素內(nèi)添加p元素，并設(shè)置其文本節(jié)點為“你好”，接著將另一個文本子節(jié)點為“Amigo,”的p元素添加到它的前面，參考代碼如下：

<html>

<head>

<title>insertBefore()測試</title>

window.onload = function() {

var para1 = document.createElement("p");

var para2 = document.createElement("p");

var txt1 = document.createTextNode("你好");

var txt2 = document.createTextNode("Amigo,");

var testdiv = document.getElementById("testdiv");

para1.appendChild(txt1);

para2.appendChild(txt2);

testdiv.appendChild(para1);

testdiv.insertBefore(para2, para1);

}

</script>

</head>

<body>

</div>

</body>

<html>

測試頁面顯示為：

Amigo,

你好

3、參考文檔

（1）《XML DOM createElement()方法》

http://www.w3school.com.cn/xmldom/met_document_createelement.asp

（2）《XML DOM appendChild()方法》

http://www.w3school.com.cn/xmldom/met_element_appendchild.asp

（3）《XML DOM createTextNode()方法》

http://www.w3school.com.cn/xmldom/met_document_createtextnode.asp

（4）《JavaScript DOM編程藝術(shù)》 [英] Jeremy Keith 著，楊濤、王曉云等譯，人民郵電出版社出版

posted on 2011-11-02 11:04 阿蜜果閱讀(2057) 評論(3) 編輯收藏所屬分類: Javascript

FeedBack:

# re: 蜜果私塾：DOM，黑色藝術(shù)的終結(jié)者（3）

2011-11-04 08:25 | tbw

寫得很不錯回復(fù) 更多評論

# re: 蜜果私塾：DOM，黑色藝術(shù)的終結(jié)者（3）[未登錄]

2011-11-06 16:53 | alex

（3）refChild參數(shù)：表示在此節(jié)點錢插入新節(jié)點。

完美主義者呵呵

（3）refChild參數(shù)：表示在此節(jié)點（前）插入新節(jié)點。回復(fù) 更多評論

# re: 蜜果私塾：DOM，黑色藝術(shù)的終結(jié)者（3）

2011-11-06 17:46 | 阿蜜果

@alex
謝謝，看到很仔細，呵呵，已更正錯別字。回復(fù) 更多評論

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發(fā)表評論。




網(wǎng)站導(dǎo)航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關(guān)文章: 蜜果私塾：在JavaScript中使用適配器模式蜜果私塾：在JavaScript中使用工廠模式蜜果私塾：在JavaScript中使用單例模式蜜果私塾：JavaScript代碼的壞味道【不斷補充】蜜果私塾：DOM，黑色藝術(shù)的終結(jié)者（3）蜜果私塾：DOM，黑色藝術(shù)的終結(jié)者（2）蜜果私塾：DOM，黑色藝術(shù)的終結(jié)者（1） js操作iframe的一些知識 JavaScript學(xué)習(xí)筆記——繼承 JavaScript學(xué)習(xí)筆記——瀏覽器中的JavaScript

2011年11月

日

一

二

三

四

五

六

      生活將我們磨圓，是為了讓我們滾得更遠——“圓”來如此。
      我的作品：
  玩轉(zhuǎn)Axure RP （2015年12月出版）

Power Designer系統(tǒng)分析與建模實戰(zhàn) （2015年7月出版）

Struts2+Hibernate3+Spring2 （2010年5月出版）

1、不使用DOM的做法

1.1 使用document.write()方法

1.2 使用innerHTML屬性

2、使用DOM動態(tài)創(chuàng)建HTML內(nèi)容

2.1 createElement()方法：創(chuàng)建元素

2.2 appendChild()方法：追加子節(jié)點

2.3 createTextNode()方法：創(chuàng)建文本節(jié)點

2.4 insertBefore()方法：添加新節(jié)點到現(xiàn)有元素前

3、參考文檔

留言簿(263)

隨筆分類

隨筆檔案

文章分類

相冊

關(guān)注blog

積分與排名

最新評論

閱讀排行榜

評論排行榜

1、 不使用DOM的做法

1.1 使用document.write()方法

1.2 使用innerHTML屬性

2、 使用DOM動態(tài)創(chuàng)建HTML內(nèi)容

2.1 createElement()方法：創(chuàng)建元素

2.2 appendChild()方法：追加子節(jié)點

2.3 createTextNode()方法：創(chuàng)建文本節(jié)點

2.4 insertBefore()方法：添加新節(jié)點到現(xiàn)有元素前

3、 參考文檔

留言簿(263)

隨筆分類

隨筆檔案

文章分類

相冊

關(guān)注blog

積分與排名

最新評論

閱讀排行榜

評論排行榜

1、不使用DOM的做法

2、使用DOM動態(tài)創(chuàng)建HTML內(nèi)容

3、參考文檔