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.

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.