用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中

回答

相关问题