javascript - 使用 createDocumentFragment 插入嵌套的 div 结构

Question

如何使用 createDocumentFragment 一次创建七个嵌套的 div 元素？

我想创建一个容器 A，其中包含 A1、A2、A3 和 A4，然后在 A2 中创建 A2a 和 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);

有人可以解释一下如何嵌套吗？上面只是将七个 child 添加到“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 创建一整套对象(包括任意多的嵌套层)。