如何将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/ 。