javascript - Inserting a nested div structure with createDocumentFragment - Stack Overflow

admin管理员组

文章数量:1024724

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.

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.

• javascript
• dom
• fragment
• appendchild

Share Improve this question Follow edited May 23, 2017 at 12:31 CommunityBot 111 silver badge asked Mar 11, 2012 at 4:21 NickNick 6,0351212 gold badges5656 silver badges8080 bronze badges 1

• 1 +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. – Smandoli Commented Nov 26, 2012 at 19:58

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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.

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

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.

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.

• javascript
• dom
• fragment
• appendchild

Share Improve this question Follow edited May 23, 2017 at 12:31 CommunityBot 111 silver badge asked Mar 11, 2012 at 4:21 NickNick 6,0351212 gold badges5656 silver badges8080 bronze badges 1

• 1 +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. – Smandoli Commented Nov 26, 2012 at 19:58

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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.

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

本文标签： javascriptInserting a nested div structure with createDocumentFragmentStack Overflow