網上可以搜到的大部分都是說使用createDocumentFragment主要是因為避免因createElement多次添加到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的第一個例子，並不代表對原作者有任何意見，原文地址http://www.cnitblog.com/asfman/articles/32614.html）
這個說法並沒有錯，但是並不嚴謹，因為像這種用法，主要還是用在目標節點是已存在並且有一部分內容的情況下，比如上面例子中的body元素，如果目標節點並不存在或者為空，完全可以用createElement創建一個相同的元素，操作之後再使用一次appendChild或者replaceChild來達到相同的目的，這樣也不存在重復刷新的問題。
雖說我平時都是把兩者混著用，但是還是得明白兩者之間的一點區別：
第一：
createElement創建的元素可以使用innerHTML，createDocumentFragment創建的元素使用innerHTML並不能達到預期修改文檔內容的效果，只是作為一個屬性而已。兩者的節點類型完全不同，並且createDocumentFragment創建的元素在文檔中沒有對應的標記，因此在頁面上只能用js中訪問到。
demo：
復制代碼 代碼如下:
<!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>我是一個粉刷匠</p>';
document.body.appendChild(fragment_1);
var fragment_2 = document.createElement('p');
fragment_2.innerHTML = '粉刷本領強';
document.body.appendChild(fragment_2);
</script>
</body>
</html>
第二：另一個最主要的區別就是createElement創建的元素可以重復操作，添加之後就算從文檔裡面移除依舊歸文檔所有，可以繼續操作，但是createDocumentFragment創建的元素是一次性的，添加之後再就不能操作了（說明：這裡的添加並不是添加了新創建的片段，因為上面說過，新創建的片段在文檔內是沒有對應的標簽的，這裡添加的是片段的所有子節點）。
一個對比的例子：
復制代碼 代碼如下:
<!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);//報錯，因為此時文檔內部已經能夠不存在fragment了
setTimeout(function(){
outer.removeChild(fragment);
},1000)
},1000)
}
</script>
</body>
</html>