Inserting a nested div structure with createDocumentFragment

Question

How do you use createDocumentFragment to create seven nested div elements in one hit?

I want to create a container A which contains A1, A2, A3 & A4, and then A2a & A2b within A2.

Note: this is a follow-up question to this which explained createDocumentFragment, but not how to nest divs using it. The answer given was as follows (which was helpful as far as it went):

var fragment = document.createDocumentFragment();

function u1(tag, id, className){
    var tag = document.createElement(tag);
    tag.id = id;
    tag.className = className;
    fragment.appendChild(tag); 
}

// call u1() seven times

document.getElementById('foo').appendChild(fragment);

Could someone explain how to nest? The above just adds seven children to 'foo'. I've trawled the web, but to no avail.

Thanks.

Unreligious

+1 for your clear-headed use of a follow-up question, and I'm sure someone appreciates that you made the two posts point to each other. – Exordium

Answer 1

Rather than calling appendChild on the fragment (which creates a top level object in your fragment), you call appendChild on one of the other objects in your fragment and that nests into that object. Here's a pseudo code example that puts tag2 nested into tag.

var tag = document.createElement(tag);
tag.id = id;
tag.className = className;
fragment.appendChild(tag); 

var tag2 = document.createElement(tag);
tag2.id = id2;
tag.className = className2;
tag.appendChild(tag2);

Note: you can also set tag.innerHTML and create a whole host of objects (including as many layers of nesting as you want) just from that HTML.

Indigestive

Answer 2

Once I made a recursive function that parsed an JSON object (received from the server) to a DocumentFragment. I need to dig it out again. Here is a JSON of that kind. Recursion start on 'children':

var input="query":"#toPasteId","child":{"#toPasteId":{"a":"div","style":"color:blue","children":[{"a":"span","textcontent":"blabla"},{"a":"div","style":"border: 5px solid red","textcontent":"blublub"}]}}

It might not help but probably you'll find out before I find my paddle.

PS:Found it.

,oParse=function(obj){
        var query=obj.query
           ,curObj=obj.child
           ,frag=document.createDocumentFragment()
           ,d=document
           ,rParse=function(curObj,frag){
                   var curElem=d.createElement(curObj.a);
                   frag.appendChild(curElem);
                   delete curObj.a;
                   for(var elem in curObj){
                        switch(elem){
                              case 'child':
                                   if(curObj.child.length){
                                     for(var i=0;i<curObj.child.length;i++){
                                        rParse(curObj.child[i],curElem);
                                     }
                                   }                                
                                   else{
                                     rParse(curObj.child,curElem);
                                   }
                                   break;
                              case 'style':  
                                   curElem.style.cssText=curObj[elem];                                             
                                   break;   
                              default:
                                   curElem[elem]=curObj[elem];
                    }      
                 }  
           return frag;
           };

d.querySelector(query).appendChild(rParse(curObj,frag));
};

oParse(input);

Electroscope