Question

我想知道是否可以使用单个文档片段在DOM中插入多个片段，或者我是否必须为每个要插入的元素创建新片段。

我可以做下面的例子：

var frag = document.createDocumentFragment(),
    div = document.createElement('div'),
    section = document.createElement('section'),
    header = document.createElement('header'),
    divFrag = frag.appendChild(div),
    sectionFrag = frag.appendChild(section),
    headFrag = frag.appendChild(header);

非常感谢

Answer 1

如果您需要设置id属性，则无法重复使用完全相同的dom，因为ids需要是唯一的。

你可以使用某种模板，你可以从中获得结构相似但价值不同的自定义dom片段。

Answer 2

关于代码的注释：appendChild返回插入的DOM元素，所以：

divFrag = frag.appendChild(div)

将返回div。即div === divFrag。

要回答您的问题，您可以重复使用文档片段。

例如，如果您想将所有元素附加到<body>，则可以这样做：

frag.appendChild(div);
frag.appendChild(section);
frag.appendChild(header);

document.body.appendChild(frag); // append all three elems at once to the body

// frag is now an empty fragment, ready for re-use

Answer 3

不，这将得到与：

相同的结果

var frag = document.createDocumentFragment(),
div = document.createElement('div'),
section = document.createElement('section'),
header = document.createElement('header');

frag.appendChild(div);
frag.appendChild(section);
frag.appendChild(header);

var divFrag = div, sectionFrag = section, headFrag = header;

因此，您的片段最终会包含三个元素，而divFrag，sectionFrag和headFrag变量根本不会是片段。

可以多次使用单个文档片段

3 个答案: