如何將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標籤，但什麼我想反而是剛剛它們添加到一個空的元素，但它不工作：

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 fragments是。您可以通過document.createDocumentFragment()創建一個新片段，並將其用作單個元素。

Answer 2

如果你想直接在文檔的正文中插入的specifieds元件（未像「DIV」的其他元素內），儘量

document.body.appendChild(callSomePrototypesMethod());

有一個關於「document.body的音符。 appendChild'在IE中。請參閱http://danielsaidi.wordpress.com/tag/documentbodyappendchild/。