使用createDocumentFragment（）將Ajax附加到元素;而不是創建元素

Question

這個職位是最有益的理解createDocumentFragment（）代替的createElement（） Should I use document.createDocumentFragment or document.createElement

我瞭解，使用片段性能原因，將有助於對大數據集，所以我想CONVER我的功能。

這就是我現在使用，它可以作爲期望=>獲取從阿賈克斯一個php文件的內容，然後追加內新div.feedBox（r作爲XMLHTTP在現有div#wrapper的頂部此內容/活動對象）

r.onreadystatechange=function(){ 
    if(r.readyState==4 && r.status==200){ 

     //Want to convert this to createDocumentFrangment --START 
     var n = document.createElement("div"); 
     n.className = "feedBox"; 
     n.innerHTML = r.responseText; 
     document.getElementById("wrapper").insertBefore(n, document.getElementById("wrapper").firstChild); 
     //Want to convert this to createDocumentFrangment --END 
    } 
} 

這是我嘗試過，但發生的事情是被添加的內容，但沒有div.feedBox

var n = document.createElement("div"); 
n.className = "feedBox"; 
n.innerHTML = r.responseText; 
var f = document.createDocumentFragment(); 
while (n.firstChild) { f.appendChild(n.firstChild); } 
document.getElementById("wrapper").insertBefore(f, document.getElementById("wrapper").firstChild); 

我錯過了什麼？你能解釋爲什麼以及如何使它工作？ 這真的是一個更有效的方法嗎？

PS：NO jquery please。我知道它很好，我在其他項目上廣泛使用它，但我希望它儘可能小/輕/高效。

Answer 1

不應該在該行

while (n.firstChild) { f.appendChild(n.firstChild); 

是

f.appendChild(n); 

我也看到你不追加div.feedBox您隨時隨地DOM ..

如果while condition fails會發生什麼。 。你沒有追加任何東西給你的DOM ..

我假定這將工作..沒有測試雖然

f.appendChild(n) 
document.getElementById("wrapper").appendChild(f,   
           document.getElementById("wrapper").firstChild); 

也最好使用

.appendChild(f,，而不是.insertBefore(f,

Check Fiddle

Answer 2

這是一個完整的工作功能，any1應該可以隨意使用它：

function ajax_fragment(php_file){ 
    if (window.XMLHttpRequest){ 
     r=new XMLHttpRequest(); 
    } else{ 
     r=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 

    r.onreadystatechange=function(){ 
     if(r.readyState==4 && r.status==200){ 
      var n = document.createElement("div");  //Create a div to hold the content 
      n.className = "feedBox";      //Give a class 'feddBox' to the div 
      n.innerHTML = r.responseText;    //Put the response in the div 
      var f = document.createDocumentFragment(); //Create the fragment 
      f.appendChild(n);       //Add the div to the fragment 

      //Append the fragment's content to the TOP of wrapper div. 
      document.getElementById("wrapper").insertBefore(f, document.getElementById("wrapper").firstChild); 
     } 
    } 
    r.open("GET",php_file,true); 
    r.send(); 
}