javascript - 如何将 DOM 元素附加到 JavaScript 中的空元素中？

Question

我有一堆对象返回一个 DOM 树，然后我用它来附加到一个元素。例如，

var elem = document.createElement('div');
elem.appendChild(callSomePrototypesMethod());
elem.appendChild(callSomePrototypesMethod());
elem.appendChild(callSomePrototypesMethod());

我最终会变成这样：

<div>
<div id="...">...</div>
<div id="...">...</div>
<div id="...">...</div>
</div>

这三个 DIV 是由第三方代码创建的，我在这里将它们包装在我的 DIV 标签周围，但我想要的只是将它们附加到一个空元素，但它不起作用：

var elem = document.createElement('');
elem.appendChild(callSomePrototypesMethod());
elem.appendChild(callSomePrototypesMethod());
elem.appendChild(callSomePrototypesMethod());

预期成绩：

<div id="...">...</div>
<div id="...">...</div>
<div id="...">...</div>

我不确定这对你是否有意义，但我需要使用 DOM，我不能将这些内容放在任何其他元素中......

Answer 1

这就是文档片段的用途。您可以通过创建一个新片段document.createDocumentFragment()并将其用作单个元素。

Answer 2

如果您想将指定的元素直接插入到文档正文中（而不是在像“div”这样的其他元素内），请尝试

document.body.appendChild( callSomePrototypesMethod() );

在 IE 中有一个关于 'document.body.appendChild' 的注释。请参阅http://danielsaidi.wordpress.com/tag/documentbodyappendchild/。