用createDocumentFragment插入一個嵌套div結構

如何使用createDocumentFragment在一次打擊中創建七個嵌套div元素？用createDocumentFragment插入一個嵌套div結構

我想創建一個容器A，其中包含A2內的A1，A2，A3和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'。我拖網，但無濟於事。

謝謝。

來源

2012-03-11 Nick

+1爲了您清楚地使用後續問題，我相信有人會感謝您讓這兩個帖子互相指向。 – Smandoli 2012-11-26 19:58:24

謝謝，@Smandoli :) – Nick 2012-11-27 11:09:10

而不是調用的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。

來源

2012-03-11 06:07:07 jfriend00

太好了。謝謝，@ jfriend00。 – Nick 2012-03-11 06:56:14

一旦我提出，解析了一個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);

來源

2014-08-27 17:54:58

用createDocumentFragment插入一個嵌套div結構

回答

相關問題