使用createDocumentFragment插入嵌套的div结构

时间:2012-03-11 04:21:31

标签: javascript dom fragment appendchild

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

我想创建一个包含A1,A2,A3和A的容器A. A4,然后A2a& A2b内的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);

有人可以解释如何筑巢吗?以上只是增加了7个孩子到了foo'。我已经在网上搜索过,但无济于事。

感谢。

2 个答案:

答案 0 :(得分:4)

不是在片段上调用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创建一整套对象(包括任意多层的嵌套)。

答案 1 :(得分:0)

我创建了一个递归函数,将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);