使用JavaScript插入HTML元素兩次（或多次）

Question

如何使用JavaScript插入兩次HTML元素？

這個代碼不工作：

var div = document.createElement('div'); 
div.innerText = 'Hello!'; 
document.body.appendChild(div); 
document.body.appendChild(div); 

測試：http://jsfiddle.net/9z82D/

Answer 1

好吧，我發現，你只需要使用cloneNode：

var div = document.createElement('div'); 
div.innerText = 'Hello!'; 
document.body.appendChild(div); 
var div2 = div.cloneNode(true); 
document.body.appendChild(div2); 

Answer 2

爲了詳細說明你的答案，使用appendChild不會將元素'div'的複製並將其附加到主體的末尾，它會移動實際節點。

所以，如果你有兩個元素，DIV和DIV2，你這樣做：

document.body.appendChild(div); 
document.body.appendChild(div2); 
document.body.appendChild(div); 

格被插入到身體的結束，然後DIV2，那麼DIV會從頂部向底部移動。 （請參閱http://jsfiddle.net/9z82D/3/）

這很有幫助，因爲您在對對象div反映後追加它後對div做出的任何更改。如果情況並非如此，則在進行任何其他更改之前，您必須執行額外的getElementsByTagName才能重新捕獲該元素。

例如，在附加節點後嘗試div.innerText='goodbye';--文本將更新而不必再次追加。

Answer 3

而是克隆和創建多個變量，你可以只循環播放：

for(i=0;i<2;i++) 
{ 
    var div = document.createElement('div'); 
    div.innerText = 'Hello!'; 
    document.body.appendChild(div); 
}