Вставка вложенной структуры div с помощью createDocumentFragment

Question

Как вы используете createDocumentFragment для создания семи вложенных элементов div за один удар?

Я хочу создать контейнер A, который содержит A1, A2, A3 & A4, а затем A2a & A2b в пределах A2.

Примечание: это следующий вопрос к this, который объясняет созданиеDocumentFragment, но не как вложить в него divs. Ответ дается следующим образом (что было полезным, насколько это пошло):

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». Я трал сеть, но безрезультатно.

Спасибо.

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