JavaScript裏還有這樣一個很有用的東西：DocumentFragment。程序員可以使用DocumentFragment將一批子元素添加到任何類似node的父節點上，對這批子元素的操作不需要一個真正的根節點。程序員可以不依賴可見的DOM來構造一個DOM結構，而效率高是它真正的優勢，試驗表明，它比直接操作DOM快70%。
DocumentFragment例子
我們要使用UL元素，然後往裏面插入LI元素：
<ul id="list"></ul>DOM插入和修改是一個很費力耗時的工作，所以，這樣的交互越少越好。這就是DocumentFragment發揮功用的地方了。第一步我們先創建一個DocumentFragment：
// Create the fragment
var frag = document.createDocumentFragment();DocumentFragment實際上像一個僞DOM節點，在這個例子裏你可以把它當成虛擬的UL元素。現在，我們開始往裏面加入元素：
// Create numerous list items, add to fragment
for(var x = 0; x < 10; x++) {
var li = document.createElement("li");
li.innerHTML = "List item " + x;
frag.appendChild(li);
}往DocumentFragment裏添加元素就跟你操作普通的DOM節點一樣。一旦頁面DOM加載完成，你可以訪問了，你就可以把DocumentFragement掛到它的父節點上：
// Mass-add the fragment nodes to the list
document.body.appendChild(frag);使用DocumentFragement要比直接對DOM節點操作要快的多，而且程序員可以利用新DOM節點來操作DocumentFragement，這樣比操作整個頁面DOM要更容易。所以，當需要進行大量DOM操作時，儘量使用DocumentFragement，它會讓你的應用變的更快！
以下爲demo的全部代碼：
<body>
<ul id="list"></ul>
<script>
var frag= document.createDocumentFragment();
for(var i = 0 ; i < 10; i ++) {
var li = document.createElement("li");
li.innerHTML = "List item " + i;
frag.appendChild(li);
}
document.getElementById("list").appendChild(frag);
</script>
</body>