使用 JavaScript 向 DOM 添加元素答案

【问题标题】：Add an element to the DOM with JavaScript使用 JavaScript 向 DOM 添加元素
【发布时间】：2011-01-27 05:36:22
【问题描述】：

我想用 JavaScript 添加一个元素。

我有以下代码：

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>

哪里出错了？

【问题讨论】：

标签： javascript html dom

【解决方案1】：

这应该可以满足您的需求：

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

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

</body>
</html>

首先，您通过document.createElement 创建元素。要设置其文本内容，您必须有一个“文本节点”来包装您的文本。因此，您首先创建这样的文本节点，然后将其作为（唯一的）子节点添加到您的新对象中。

然后，将新创建的 DIV 元素添加到 DOM 结构中。您不必使用 getElementsByTagName() 查找 BODY 元素，因为它作为 document 对象的属性存在。

【讨论】：

但这只是一个例子，当我想要 getElementsByTagName('xyz') 并创建元素 createElement('abc') 并设置 innerHTML="text" ....我该怎么做？
请注意，在添加多个元素时，您应该始终使用documentFragment。 documentFragment 充当一个临时区域，您可以在其中重复添加元素，最后将其添加到 DOM。反复向DOM 添加元素会导致整个文档重排。看到这个：ejohn.org/blog/dom-documentfragments

【解决方案2】：

您的代码失败了，因为在您尝试插入该全新 div 时，body 标记为空，因此没有 firstChild 可以附加任何内容。将最后一行更改为：

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

【讨论】：