document的createDocumentFragment()方法__JavaScript學習

在《javascript進階程式設計》一書的6.3.5:建立和動作節點一節中，介紹了幾種動態建立html節點的方法，其中有以下幾種常見方法：

· crateAttribute(name)：　　　　　 　　用指定名稱name建立特性節點

· createComment(text)：　　　　　　　建立帶文本text的注釋節點

· createDocumentFragment()：　　　　建立文檔片段節點

· createElement(tagname)：　　　　　  建立標籤名為tagname的節點

· createTextNode(text)：　　　　　　   建立包含文本text的文本節點

其中最感興趣且以前沒有接觸過的一個方法是createComment(text)方法，書中介紹說：在更新少量節點的時候可以直接向document.body節點中添加，但是當要向document中添加大量資料是，如果直接添加這些新節點，這個過程非常緩慢，因為每添加一個節點都會調用父節點的appendChild()方法，為瞭解決這個問題，可以建立一個文檔片段，把所有的新節點附加其上，然後把文檔片段一次性添加到document中。

假如想建立十個段落，使用常規的方式可能會寫出這樣的代碼：

1 2 3 4 5 6

for ( var  i = 0 ; i < 10; i ++) {      var  p = document.createElement( "p" );      var  oTxt = document.createTextNode( "段落"  + i);      p.appendChild(oTxt);      document.body.appendChild(p); }

當然，這段代碼運行是沒有問題，但是他調用了十次document.body.appendChild()，每次都要產生一次頁面渲染。這時片段就十分有用了：

1	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(