Question

这篇文章对于理解createDocumentFragment（）而不是createElement（）是最有帮助的。 Should I use document.createDocumentFragment or document.createElement

我已经明白，出于性能原因，使用片段将有助于大数据集，所以我想转换我的功能。

这就是我现在使用的，它可以按照需要运行=＆gt;从带有ajax的php文件中获取内容，然后将此内容附加到现有div#wrapper 内的顶部 新div.feedBox（{{1}是XMLHTTP / ACTIVE OBJECT）

这是我尝试过的，但会发生的是内容被添加但没有div.feedBox

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
    }
}

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

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

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

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

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

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

2 个答案: