快捷導(dǎo)航

createElement與createDocumentFragment的點(diǎn)點(diǎn)區(qū)別小結(jié)

更新時(shí)間：2011年12月19日 23:50:48 作者：

在DOM操作里，createElement是創(chuàng)建一個(gè)新的節(jié)點(diǎn)，createDocumentFragment是創(chuàng)建一個(gè)文檔片段

網(wǎng)上可以搜到的大部分都是說使用createDocumentFragment主要是因?yàn)楸苊庖騝reateElement多次添加到document.body引起的效率問題，比如：

 
var arrText=["1","2","3","4","5","6","7","8","9","10"]; 
for(var i=0;i<arrText.length;i++){ 
var op=document.createElement("P"); 
var oText=document.createTextNode(arrText[i]); 
op.appendChild(oText); 
document.body.appendChild(op); 
} 
var arrText=["1","2","3","4","5","6","7","8","9","10"]; 
var oFrag=document.createDocumentFragment(); 
for(var i=0;i<arrText.length;i++){ 
var op=document.createElement("P"); 
var oText=document.createTextNode(arrText[i]); 
op.appendChild(oText); 
oFrag.appendChild(op); 
} 
document.body.appendChild(oFrag); 

（聲明：這是我google的第一個(gè)例子，并不代表對原作者有任何意見，原文地址http://www.cnitblog.com/asfman/articles/32614.html）
這個(gè)說法并沒有錯(cuò)，但是并不嚴(yán)謹(jǐn)，因?yàn)橄襁@種用法，主要還是用在目標(biāo)節(jié)點(diǎn)是已存在并且有一部分內(nèi)容的情況下，比如上面例子中的body元素，如果目標(biāo)節(jié)點(diǎn)并不存在或者為空，完全可以用createElement創(chuàng)建一個(gè)相同的元素，操作之后再使用一次appendChild或者replaceChild來達(dá)到相同的目的，這樣也不存在重復(fù)刷新的問題。
雖說我平時(shí)都是把兩者混著用，但是還是得明白兩者之間的一點(diǎn)區(qū)別：
第一：
createElement創(chuàng)建的元素可以使用innerHTML，createDocumentFragment創(chuàng)建的元素使用innerHTML并不能達(dá)到預(yù)期修改文檔內(nèi)容的效果，只是作為一個(gè)屬性而已。兩者的節(jié)點(diǎn)類型完全不同，并且createDocumentFragment創(chuàng)建的元素在文檔中沒有對應(yīng)的標(biāo)記，因此在頁面上只能用js中訪問到。
demo：

復(fù)制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title></title> 
<style type="text/css"> 
#outer{ height: 200px; border: 1px solid #006400;} 
</style> 
</head> 
<body> 
<div id="outer"> 
</div> 
<input type="button" value="createElement" id="btn_1"/><input type="button" value="createDocumentFragment" id="btn_2"/> 
<script type="text/javascript"> 
var fragment_1 = document.createDocumentFragment(); 
fragment_1.innerHTML = '<p>我是一個(gè)粉刷匠</p>'; 
document.body.appendChild(fragment_1); 
var fragment_2 = document.createElement('p'); 
fragment_2.innerHTML = '粉刷本領(lǐng)強(qiáng)'; 
document.body.appendChild(fragment_2); 
</script> 
</body> 
</html> 

第二：另一個(gè)最主要的區(qū)別就是createElement創(chuàng)建的元素可以重復(fù)操作，添加之后就算從文檔里面移除依舊歸文檔所有，可以繼續(xù)操作，但是createDocumentFragment創(chuàng)建的元素是一次性的，添加之后再就不能操作了（說明：這里的添加并不是添加了新創(chuàng)建的片段，因?yàn)樯厦嬲f過，新創(chuàng)建的片段在文檔內(nèi)是沒有對應(yīng)的標(biāo)簽的，這里添加的是片段的所有子節(jié)點(diǎn)）。
一個(gè)對比的例子：

復(fù)制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title></title> 
<style type="text/css"> 
#outer{ height: 200px; border: 1px solid #006400;} 
</style> 
</head> 
<body> 
<div id="outer"> 
</div> 
<input type="button" value="createElement" id="btn_1"/><input type="button" value="createDocumentFragment" id="btn_2"/> 
<script type="text/javascript"> 
function $(id){ 
return document.getElementById(id); 
} 
var outer = $('outer'); 
var inner = $('inner'); 
$('btn_1').onclick = function(){ 
var div = document.createElement('div'); 
div.innerHTML = '<p>測試createElement</p>'; 
document.body.appendChild(div); 
setTimeout(function(){ 
outer.appendChild(div); 
setTimeout(function(){ 
outer.removeChild(div); 
},1000) 
},1000) 
} 
$('btn_2').onclick = function(){ 
var p = document.createElement('p'); 
p.innerHTML = '測試DocumentFragment'; 
var fragment = document.createDocumentFragment(); 
fragment.appendChild(p); 
fragment.innerHTML = '<p>測試DocumentFragment</p>'; 
fragment.innerHTML = '<span>測試DocumentFragment</span>'; 
document.body.appendChild(fragment); 
setTimeout(function(){ 
outer.appendChild(fragment);//報(bào)錯(cuò)，因?yàn)榇藭r(shí)文檔內(nèi)部已經(jīng)能夠不存在fragment了 
setTimeout(function(){ 
outer.removeChild(fragment); 
},1000) 
},1000) 
} 
</script> 
</body> 
</html> 