Question

This post was the most helpfull to understand createDocumentFragment() instead of createElement()
Should I use document.createDocumentFragment or document.createElement

I’ve understood that for performance reason using fragment will help on big dataset so i want to conver my function.

This is what i use right now and it works as desired => Get content from a php file with ajax and then append this content at the top of existing div#wrapperinside a new div.feedBox(r being the 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
    }
}

This is what i tried, but what happens is the content is added but without the 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);

What did i miss? can you explain why and how to make it work?
Is this really a more efficient way of doing this?

PS: NO jquery please. I know it well and i use it widely on other project but i want this to be as small / lite / efficient as possible.

Answer 1

Shouldn’t this line

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

be

f.appendChild(n);

Also I see that you are not appending the div.feedBox to your DOM anywhere..

What happens if the while condition fails.. You are not appending anything to your DOM..

I am assuming this will work .. Not tested though

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

ALso better to use

.appendChild(f, instead of .insertBefore(f,

Check Fiddle