Javascript 使用createDocumentFragment插入嵌套的div结构

如何使用createDocumentFragment在一次命中中创建七个嵌套的div元素

我想创建一个容器a，其中包含A1、A2、A3和A4，然后是A2中的A2a和A2b

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

有人能解释一下如何筑巢吗？以上只是在“foo”中添加了七个孩子。我在网上搜罗过，但没有用

---

谢谢。

在片段中调用appendChild（在片段中创建顶级对象），而不是在片段中的其他对象之一上调用appendChild并嵌套到该对象中。下面是一个将tag2嵌套到标记中的伪代码示例

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创建一整套对象（包括任意多个嵌套层）。

我创建了一个递归函数，将JSON对象（从服务器接收）解析为DocumentFragment。我需要再把它挖出来。这里有一个类似的JSON。递归从“子对象”开始：

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

，不透明度=功能（obj）{
var query=obj.query
，curObj=obj.child
，frag=document.createDocumentFragment（）
，d=文件
，rParse=函数（curObj，frag）{
var curElem=d.createElement（curObj.a）；
附件碎片（curElem）；
删除curObj.a；
for（curObj中的变量元素）{
开关（elem）{
“儿童”一案：
if（curObj.child.长度）{
对于（var i=0；i+1）来说，对于你清晰地使用后续问题，我相信有人会赞赏你将两篇文章相互指向对方。
,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);