如何使用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'。我已经在网上搜索过,但无济于事。
感谢。
答案 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);