document.createElement()和document.createDocumentFragment()的比較

我在上一篇文章js中DOM操作複習總結中提到了：document.createElement()和document.createDocumentFragment()，雖說我們平時可以把兩者混著用，但是還是得明白兩者之間的區別：

一.在DOM操作中document.createElement()每次創建的都是一個DOM節點，所以每次都要執行把節點添加到document.body(或其後的節點)中的操作，這樣對於一個小程序運行時沒有問題的，但如果他調用了十次甚至一百次一千次document.body.appendChild()，每次都要產生一次頁麵刷新，這樣就會產生很多頁麵碎片，而此時就體現出了document.createDocumentFragment()的重要性。

document.createDocumentFragment()是創建一個文檔片段，把所有的新節點附加其上，然後把文檔碎片的內容一次性添加到document中，這樣不管要添加多少個節點都隻需要最後添加的時候調用一次，這意味著隻需要進行一次頁麵的刷新，需要的時間顯然會比前麵的要少。

eg：第一段代碼用document.createElement()來實現，如下：

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.createDocumentFragment()來實現，如下：

var oFragment = document.createDocumentFragment();

for(var i = 0 ; i < 10; i ++) {

var p = document.createElement("p");

var oTxt = document.createTextNode("段落" + i);

p.appendChild(oTxt);

oFragment.appendChild(p);

}

document.body.appendChild(oFragment);

很明顯可以驗證第二種方法比第一種方法節省時間

二.reateElement創建的元素可以使用innerHTML，createDocumentFragment創建的元素使用innerHTML並不能達到預期修改文檔內容的效果，隻是作為一個屬性而已。兩者的節點類型完全不同，並且createDocumentFragment創建的元素在文檔中沒有對應的標記，因此在頁麵上隻能用js中訪問到

三.另一個最主要的區別就是createElement創建的元素可以重複操作，添加之後就算從文檔裏麵移除依舊歸文檔所有，可以繼續操作，但是createDocumentFragment創建的元素是一次性的，添加之後再就不能操作了（說明：這裏的添加並不是添加了新創建的片段，因為上麵說過，新創建的片段在文檔內是沒有對應的標簽的，這裏添加的是片段的所有子節點）。