Question

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

<!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行得到了这个错误：

未捕获的TypeError：无法调用未定义的方法'appendChild'

Answer 1

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

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

另外，改变：

document.divElement.appendChild(el);

要：

divElement.appendChild(el);

Answer 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/

Answer 3

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]);   

}

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

3 个答案: