0

这篇文章最有助于理解 createDocumentFragment() 而不是 createElement() 我应该使用 document.createDocumentFragment 还是 document.createElement

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

这就是我现在使用的，它可以按需要工作=>使用 ajax 从 php 文件中获取内容，然后将此内容附加到新的现有内容的顶部（即 XMLHTTP /ACTIVE OBJECT）div#wrapperdiv.feedBoxr

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：请不要使用jquery。我很了解它，我在其他项目中广泛使用它，但我希望它尽可能小/精简/高效。

4

2 回答 2

2

这条线不应该

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

是

f.appendChild(n);

我还看到您没有将div.feedBoxDOM 附加到任何地方..

如果while condition fails.. 您没有将任何内容附加到您的DOM..会发生什么

我假设这会起作用..虽然没有测试

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

也更好用

.appendChild(f, 代替 .insertBefore(f,

检查小提琴

于 2012-11-15T22:15:55.423 回答
0

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

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();
}
于 2012-11-15T22:56:00.037 回答