使用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(); 
}