与 div 元素一起使用时未定义 appendChild 方法答案

【问题标题】：appendChild method is not defined when using with a div element与 div 元素一起使用时未定义 appendChild 方法
【发布时间】：2012-07-15 21:07:56
【问题描述】：

我真的是 Javascript 的初学者，并尝试在此 HTML 中的 div 元素中添加 p 元素：

<!doctype html>
<html>
    <head>
    </head>

    <body>
        <p>This is paragraph 1.</p>
        <p>This is paragraph 2.</p>
        <p>This is paragraph 3.</p>
        <p>This is paragraph 4.</p>
        <div>
            <p id="foo">This is paragraph 5.</p>
        </div>
        <script type="text/javascript" src="script.js"></script>
    </body>

</html>

使用此代码：

(function(){
    var divElement = document.getElementsByTagName("div");
        el = document.createElement("p");
        content = document.createTextNode("This is text");    
    el.appendChild(content);
    document.divElement.appendChild(el);        
}());

但我在第 6 行收到此错误：

未捕获的类型错误：无法调用未定义的方法“appendChild”

【问题讨论】：

标签： javascript dom append

【解决方案1】：

var div =  document.createElement("div");

document.lastChild.appendChild(div);

var a=[];

var n=[];



var txt=["Lovey", "komal", "Sona", "Purvi", "Sanchi"];

for (i=0; i<=txt.length; i++)

{
    a[i]=document.createElement("a");

    a[i].setAttribute("href","#");

    n[i].appendChild(n[i]);

    div.appendChild(n[i]);

    div.appendChild(a[i]);   

}

【讨论】：

【解决方案2】：

你的一个变量名有点误导，即divElement。由于您使用的是getElementsByTagName()（注意elements），它将返回一个元素列表，而不是一个元素。因此，您应该将变量命名为 divElements 以减少混淆。

我已修改您的代码以使用元素列表：

(function() {
    var divElements = document.getElementsByTagName("div");
    var el = document.createElement("p");
    var content = document.createTextNode("This is text");

    el.appendChild(content);

    for (var i = 0; i < divElements.length; i++) {
        divElements[i].appendChild(el);
    }
}());

还有一个演示：http://jsfiddle.net/UmKYq/5/

【讨论】：

【解决方案3】：

getElementsByTagName(" ... ") 返回元素的集合。

var divElement = document.getElementsByTagName("div")[0];

另外，改变：

document.divElement.appendChild(el);

收件人：

divElement.appendChild(el);

【讨论】：

@Rafael getElementsByTagName()
是的，做到了。谢谢你和 Andreas :) 但我可以问一下document.divElement.appentChile(el)、document.body.divElement.appendChild(el) 和 divElement.appendChild(el) 之间有什么区别吗？
divElement，当分配给document.getElementsByTagName("div")[0] 时，基本上已经包含了document.body 部分，因为它指向文档对象下的特定div。使用“document.divElement.appendChild(el)”相当于重复document 部分（document.document.body）两次，这是不正确的，也是失败的原因。
使用 jQuery 更容易：$("div").append($("<p>").html("This is paragraph 5.").attr("id","foo")); Done.