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

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

3 голосов
/ 11 марта 2012

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

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

Примечание: это дополнительный вопрос к 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'.Я бродил по сети, но безрезультатно.

Спасибо.

Ответы [ 2 ]

4 голосов
/ 11 марта 2012

Вместо вызова appendChild для фрагмента (который создает объект верхнего уровня в вашем фрагменте), вы вызываете appendChild для одного из других объектов в вашем фрагменте, который встраивается в этот объект. Вот пример псевдокода, который помещает тег2, вложенный в тег. 

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.

0 голосов
/ 27 августа 2014

Однажды я сделал рекурсивную функцию, которая анализировала объект 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);
...