Javascript 使用createDocumentFragment（）将Ajax附加到元素；而不是创建元素

这篇文章对理解createDocumentFragment（）而不是createElement（）最有帮助

我知道，出于性能原因，在大数据集上使用fragment会有所帮助，所以我想转换我的函数

这就是我现在使用的，它可以根据需要工作=>使用ajax从php文件中获取内容，然后将此内容附加到现有

div#wrapper

的顶部内部一个新的

div.feedBox

（

r

是XMLHTTP/ACTIVE对象）

这是我尝试过的，但实际情况是添加了内容，但没有添加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);

我错过了什么？你能解释一下为什么以及如何让它工作吗？ 这真的是一种更有效的方法吗

请不要用jquery。我很了解它，并在其他项目中广泛使用它，但我希望它尽可能小/精简/高效。

这条线不应该吗

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

是

我还看到，您没有将

div.feedBox

附加到DOM的任何位置

如果

while条件失败

，会发生什么情况。。您没有向

DOM

添加任何内容

我想这会管用的。。不过还没测试过

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

也比较好用

.appendChild（f，

而不是

.insertBefore（f，

---

这是完整的工作功能，任何人都可以随意使用：

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

---

使用if语句没有发生任何事情。正如我所说，代码中的每一件事情都非常好，除了我的ajax内容没有封装在div.feedBox中。（就像以前的版本一样）作为参考，它确实减少了函数响应时间。在小数据集上，从大约12-15毫秒减少到7-9毫秒。这很酷。下次我需要做这样的事情时，我会尝试使用它

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

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