使用 createDocumentFragment() 将 Ajax 附加到元素；而不是创建元素

Posted 2023-05-07

【中文标题】使用 createDocumentFragment() 将 Ajax 附加到元素；而不是创建元素

【英文标题】：Append Ajax to an element using createDocumentFragment(); instead of create Element

【发布时间】：2012-11-04 14:53:06

【问题描述】：

这篇文章对理解 createDocumentFragment() 而不是 createElement() 最有帮助 Should I use document.createDocumentFragment or document.createElement

我了解到，出于性能原因，使用片段将有助于处理大数据集，所以我想转换我的函数。

这是我现在使用的，它可以按需要工作 => 使用 ajax 从 php 文件中获取内容，然后将此内容附加到现有 div#wrapperinsidetop /strong> 一个新的div.feedBox（r 是 XMLHTTP /ACTIVE OBJECT）

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

【参考方案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

【讨论】：

使用 if 语句没有发生任何事情。就像我说的，除了我的 ajax 内容没有封装在 div.feedBox 中之外，代码的每一件事都很好。 （就像以前的版本一样）

Jkust 作为参考，确实减少了函数响应时间。从大约 12-15ms 到 7-9ms 在小型数据集上。

那很酷..下次我需要做这样的事情时我会尝试使用它

【参考方案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();