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

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

文：阿蜜果/2011-11-2

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

1、不使用DOM的做法

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

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

1.1 使用document.write()方法

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

<html>

<head>

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

</head>

<body>

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

</script>

</body>

<html>

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

function insertPara(content) {

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

document.write(str);

}

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

<html>

<head>

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

</script>

</head>

<body>

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

</script>

</body>

<html>

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

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

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

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

1.2 使用innerHTML屬性

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

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

window.onload = function() {

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

testdiv.innerHTML = "<p>測(cè)試<em>innerHTML</em>屬性</p>";

}

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

<html>

<head>

<title>innerHTML測(cè)試</title>

</script>

</head>

<body>

</div>

</body>

<html>

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

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

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

（3）是一項(xiàng)專利技術(shù)，而不是一項(xiàng)業(yè)界標(biāo)準(zhǔn)。

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

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

該方法用于創(chuàng)建一個(gè)元素節(jié)點(diǎn)，該方法返回一個(gè)Element對(duì)象，語(yǔ)法如下：

createElement(name)

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

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

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

document.createElement(“p”);

該方法常與而后說(shuō)到的appendChild()和createTextNode()合作使用，這個(gè)方法單獨(dú)使用是沒(méi)有實(shí)際用處的，因?yàn)樗](méi)有將創(chuàng)建的元素插入到文檔中。使用該方法將創(chuàng)建出的元素賦予一個(gè)變量后，該變量指向剛創(chuàng)建出來(lái)的元素的引用指針。這個(gè)元素是具有自己的nodeType和nodeName，如下所示：

<html>

<head>

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

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

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

</script>

</head>

<body>

</body>

<html>

測(cè)試時(shí)，提示框顯示信息為：

nodeName=P, nodeType=1

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

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

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

parent.appendChild(node)

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

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

<html>

<head>

<title>appendChild()測(cè)試</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é)點(diǎn)

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

document.createTextNode(text)

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

document.createTextNode(“你好”);

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

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

<html>

<head>

<title>appendChild()測(cè)試</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>

【提示】因?yàn)樽兞坷锎鎯?chǔ)的是引用指針，所以將上述代碼的兩句appendChild對(duì)換一下，也不會(huì)影響頁(yè)面的顯示。

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

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

parentElement.inertBefore(newChild, refChild)

其中：

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

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

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

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

<html>

<head>

<title>insertBefore()測(cè)試</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>

測(cè)試頁(yè)面顯示為：

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 阿蜜果閱讀(2058) 評(píng)論(3) 編輯收藏所屬分類: Javascript

FeedBack:

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

2011-11-04 08:25 | tbw

寫(xiě)得很不錯(cuò) 回復(fù) 更多評(píng)論

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

2011-11-06 16:53 | alex

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

完美主義者呵呵

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

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

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

@alex
謝謝，看到很仔細(xì)，呵呵，已更正錯(cuò)別字。回復(fù) 更多評(píng)論

新用戶注冊(cè) 刷新評(píng)論列表


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




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

2011年11月

日

一

二

三

四

五

六

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

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

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

1、不使用DOM的做法

1.1 使用document.write()方法

1.2 使用innerHTML屬性

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

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

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

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

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

3、參考文檔

留言簿(263)

隨筆分類

隨筆檔案

文章分類

相冊(cè)

關(guān)注blog

積分與排名

最新評(píng)論

閱讀排行榜

評(píng)論排行榜

1、 不使用DOM的做法

1.1 使用document.write()方法

1.2 使用innerHTML屬性

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

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

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

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

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

3、 參考文檔

留言簿(263)

隨筆分類

隨筆檔案

文章分類

相冊(cè)

關(guān)注blog

積分與排名

最新評(píng)論

閱讀排行榜

評(píng)論排行榜

1、不使用DOM的做法

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

3、參考文檔