|
(1)document.createElement(tagName)
createElement()用來創(chuàng)建一個元素節(jié)點(diǎn)，即 nodeType=1 的節(jié)點(diǎn)。其中，tagName 為HTML標(biāo)簽的名稱，并將返回一個節(jié)點(diǎn)對象。
(2)document.createTextNode(text)
createTextNode()用來創(chuàng)建一個文本節(jié)點(diǎn)，即 nodeType=3 的節(jié)點(diǎn)。其中，text 為文本節(jié)點(diǎn)的內(nèi)容，并將返回一個節(jié)點(diǎn)對象。
(3)document.createComment(comment)
createComment()用來創(chuàng)建一個注釋節(jié)點(diǎn)，即 nodeType=8 的節(jié)點(diǎn)。其中，comment 為注釋的內(nèi)容，并將返回一個節(jié)點(diǎn)對象。
(4)document.createDocumentFragment();
createDocumentFragment() 用來創(chuàng)建文檔碎片節(jié)點(diǎn)。文檔碎片節(jié)點(diǎn)是若干DOM節(jié)點(diǎn)的集合，可以包括各種類型的節(jié)點(diǎn)，如 元素節(jié)點(diǎn)、文本節(jié)點(diǎn)、注釋節(jié)點(diǎn) 等。文檔碎片節(jié)點(diǎn)在創(chuàng)建之初是空的，需要向它添加節(jié)點(diǎn)。 例如，創(chuàng)建<div>標(biāo)簽如下：
vvarpp = document.createElement("div") //以下代碼是用于創(chuàng)建 <div> 元素:
var node=document.createTextNode("這是新段落。");//為 <div> 元素添加文本節(jié)點(diǎn)：
pp.appendChild(node); //將文本節(jié)點(diǎn)添加到 <div> 元素中：
var element=document.getElementById("div1"); //最后，在一個已存在的元素中添加 p 元素。查找已存在的元素：
element.appendChild(pp); //添加到已存在的元素中
使用 insertBefore() 方法: 將新元素添加到開始位置 <body>
<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另外一個段落。</p>
</div> <script>
varpp = document.createElement("div") //以下代碼是用于創(chuàng)建 <div> 元素
var node=document.createTextNode("這是新段落。");//為 <div> 元素添加文本節(jié)點(diǎn)
pp.appendChild(node); //將文本節(jié)點(diǎn)添加到 <div> 元素中
var element=document.getElementById("div1"); //最后，在一個已存在的元素中添加 div 元素。查找已存在的元素：
element.appendChild(pp); //添加到已存在的元素中:
</script>
</body> 另： for(var i=0;i<5;i++) {
var op = document.createElement("span");
var oText = document.createTextNode(i);
op.appendChild(oText);
document.body.appendChild(op);
} //先創(chuàng)建文檔碎片
var oFragmeng = document.createDocumentFragment();
for(var i=0;i<10000;i++)
{
var op = document.createElement("p");
var oText = document.createTextNode(i);
op.appendChild(oText);
//先附加在文檔碎片中
oFragmeng.appendChild(op);
}
//最后一次性添加到document中
document.body.appendChild(oFragmeng);
===========================================
for(var i = 0 ; i < 10; i ++) {
var p = document.createElement("p");
var oTxt = document.createTextNode("段落" + i);
p.appendChild(oTxt);
document.body.appendChild(p);
}
這段代碼運(yùn)行是沒有問題，但是他調(diào)用了十次document.body.appendChild()，每次都要產(chǎn)生一次頁面渲染。這時(shí)碎片就十分有用了：
var oFragment = document.createDocumentFragment();
|
1 2 3 4 5 | for(var i = 0 ; i < 10; i ++) {
var p = document.createElement("p");
var oTxt = document.createTextNode("段落" + i);
p.appendChild(oTxt);
oFragment.appendChild(p);<br>}
|
1 | document.body.appendChild(oFragment);
|
在這段代碼中，每個新的<p />元素都被添加到文檔碎片中，然后這個碎片被作為參數(shù)傳遞給appendChild()。這里對appendChild()的調(diào)用實(shí)際上并不是把文檔碎片追加到body元素中，而是僅僅追加碎片中的子節(jié)點(diǎn)，然后可以看到明顯的性能提升，document.body.appenChild()一次替代十次，這意味著只需要進(jìn)行一個內(nèi)容渲染刷新。
|
