Append Ajax to an element using createDocumentFragment(); instead of create Element

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.

Sushanth -- · Accepted Answer · 2012-11-15T22:23:19.177

2

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

edited Nov 15 '12 at 22:23

answered Nov 15 '12 at 22:15

Sushanth --

55,259
9
66
105

Nothing happend using this the if statemnt. Like i said every thing works great with the code, except that my ajax content is not encapsulated in the div.feedBox. (like it is with the previous version) – Louis Loudog Trottier Nov 15 '12 at 22:25
Jkust as a reference, it actually did reduce the function response time. From about 12-15ms to 7-9ms On small dataset. – Louis Loudog Trottier Nov 15 '12 at 22:33
Thats cool.. I will try using it the next time I need to do such a thing – Sushanth -- Nov 15 '12 at 22:35

score 0 · Answer 2 · answered Nov 15 '12 at 22:56

This is the full working function, any1 sould feel free to use it:

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

Append Ajax to an element using createDocumentFragment(); instead of create Element

2 Answers2