用JavaScript添加元素到DOM中

我有以下代碼：

var collection = document.getElementsByTagName('body'); 
var a = document.createElement('div'); 
a.innerHTML = 'some text'; 
collection.item(0).firstChild.appendChild(a);

和簡單的HTML：

<html> 
    <head></head> 
<body> 

</body> 
</html>

哪裏錯了嗎？

來源

2010-03-13 john

這應該做你在找什麼：

var newdiv = document.createElement("DIV"); 
newdiv.appendChild(document.createTextNode("some text")); 
document.body.appendChild(newdiv);

首先，通過document.createElement創建元素。要設置其文本內容，您必須有一個「文本節點」來包裝文本。所以，你首先創建這樣的文本節點，然後把它作爲（唯一的）子添加到你的新對象中。

然後，將您新創建的DIV元素添加到DOM結構中。您不必使用getElementsByTagName()查找BODY元素，因爲它存在爲document對象的屬性。

來源

2010-03-13 19:13:36 naivists

但它是唯一的例子，我會想的getElementsByTagName（「XYZ」），並創建元素的createElement（「ABC」），並設置的innerHTML =「text」 ......哪有我這樣做？ – john 2010-03-13 19:19:10

剛剛起來，添加多個元素時，應該總是使用'documentFragment'。 'documentFragment'充當一個臨時區域，您可以重複添加元素，最後將其添加到'DOM'中。反覆將元素添加到'DOM'將導致整個文檔重排。看到這個：http://ejohn.org/blog/dom-documentfragments/ – 2015-12-13 13:25:05

你的代碼失敗了，因爲當你嘗試插入那個全新的div時，body標籤是空的，因此沒有firstChild來追加任何東西。你最後行更改爲：

collection.item(0).appendChild(a);

來源

2010-03-14 04:45:14

用JavaScript添加元素到DOM中

回答

相關問題