使用JavaScript向DOM添加元素

joh*_*ohn 19 html javascript dom

我想用JavaScript添加一个元素.

我有以下代码:

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

和简单的HTML:

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

</body>
</html>
Run Code Online (Sandbox Code Playgroud)

哪里出错?

nai*_*sts 31

这应该做你想要的:

    var newdiv = document.createElement("div");
    newdiv.appendChild(document.createTextNode("some text"));
    document.body.appendChild(newdiv);
Run Code Online (Sandbox Code Playgroud)

首先,您创建元素document.createElement.要设置其文本内容,您必须有一个"文本节点"包装文本.因此,首先创建此类文本节点,然后将其作为(唯一)子项添加到新对象中.

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


Mar*_*c B 6

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

collection.item(0).appendChild(a);
Run Code Online (Sandbox Code Playgroud)