2

私は本当に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' を呼び出せません

4

3 に答える 3

10

getElementsByTagName(" ... ")要素のコレクションを返します。

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

また、次のように変更します。

document.divElement.appendChild(el);

に：

divElement.appendChild(el);
于 2012-07-16T23:40:20.980 に答える
1

変数名の 1 つ、つまりdivElement. getElementsByTagName()(notice )を使用している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/

于 2012-07-16T23:46:40.660 に答える