使用 createDocumentFragment 插入嵌套的 div 结构答案

【问题标题】：Inserting a nested div structure with createDocumentFragment使用 createDocumentFragment 插入嵌套的 div 结构
【发布时间】：2012-03-11 04:21:31
【问题描述】：

如何使用 createDocumentFragment 一键创建七个嵌套的 div 元素？

我想创建一个容器 A，其中包含 A1、A2、A3 和 A4，然后在 A2 中包含 A2a 和 A2b。

注意：这是this 的后续问题，它解释了 createDocumentFragment，但没有解释如何使用它嵌套 div。给出的答案如下（这很有帮助）：

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

有人可以解释如何嵌套吗？以上只是将七个孩子添加到'foo'。我已经在网上拖网，但无济于事。

谢谢。

【问题讨论】：

+1 表示您头脑清醒地使用了后续问题，我相信有人会赞赏您让两个帖子相互指向。

标签： javascript dom fragment appendchild

【解决方案1】：

您不是在片段上调用 appendChild（在片段中创建顶级对象），而是在片段中的其他对象之一上调用 appendChild 并嵌套到该对象中。这是一个将 tag2 嵌套到 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);

注意：您还可以设置 tag.innerHTML 并仅从该 HTML 创建一整套对象（包括任意多的嵌套层）。

【讨论】：

【解决方案2】：

一旦我创建了一个递归函数，它将一个 JSON 对象（从服务器接收）解析为一个 DocumentFragment。我需要再把它挖出来。这是这种类型的 JSON。 '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"}]}}

这可能无济于事，但可能在我找到我的桨之前你会发现。

PS：找到了。

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

【讨论】：