createDocumentFragmentでネストされたdiv構造を挿入する

Question

createDocumentFragmentを使用して、1回のヒットで7つのネストされたdiv要素を作成するにはどうすればよいですか？

A2内にA1、A2、A3 & A4、次にA2a & A2bを含むコンテナAを作成したいとします。

注：これは、createDocumentFragmentについて説明したthisのフォローアップの質問ですが、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); 

誰かがどのように巣に説明してもらえ：与えられた答えは（限り、それは行ったとして有用であった）は次のようでしたか？上記はちょうど7人の子供を 'foo'に追加します。私はウェブを徘徊しましたが、無駄です。

ありがとうございました。

Answer 1

フラグメントのトップレベルオブジェクトを作成するフラグメントの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から（あなたが好きなのネストなど多くの層を含む）のオブジェクトの全体のホストを作成することができます。

Answer 2

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