web-dev-qa-db-ja.com

appendChildが機能しない

HTML：

<ul id="datalist">
</ul>

JavaScript：

function add(content){
   ul=document.getElementsByTagName("ul");
   var li=document.createElement("li");
   li.innerHTML=content;
   ul.appendChild(li);
}

addを呼び出すと、Uncaught TypeError: Object #<NodeList> has no method 'appendChild'がスローされます。理由は何ですか？

javascriptdomdom-traversal
15
bingjie2680

getElementsByTagName() は1つの要素を返しませんが、配列のようなオブジェクトである NodeList を返します。基本的には、配列として使用できることを意味します。

したがって、たとえば次のことができます。

_var ul = document.getElementsByTagName("ul")[0];
_

しかし、そのリストにとにかくIDがある場合は、単純に getElementById() を使用しないのはなぜですか？ IDはドキュメント全体で一意である必要があるため、このメソッドは1つの要素のみを返します。

_var ul = document.getElementById('datalist');
_

注：関数のローカル変数としてulを宣言してください（varを追加してください）。関数の外で使用することを意味します。

23
kapa

document.getElementsByTagNameは要素を返しませんが、要素の配列を返します。

この配列をループするか、いくつかの一意の要素を取得する必要があります。

このドキュメントを見てください： https://developer.mozilla.org/en/DOM/element.getElementsByTagName

// check the alignment on a number of cells in a table. 

var table = document.getElementById("forecast-table"); 
var cells = table.getElementsByTagName("td"); 
for (var i = 0; i < cells.length; i++) { 
    var status = cells[i].getAttribute("data-status"); 
    if ( status == "open" ) { 
        // grab the data 
    }
}
5
Edgar

あなたが抱えている問題は、getElementsByTagName()（関数の名前の「s」によって暗示される複数形に注意）がDOMノードの配列を返すことです。単一のDOMノード。これはappendChild()が機能することを期待しているものです。したがって、操作するノードの配列を特定する必要があります。

_function add(content){
   ul=document.getElementsByTagName("ul")[0]; // the [0] identifies the first element of the returned array
   var li=document.createElement("li");
   li.innerHTML=content;
   ul.appendChild(li);
}
_

ページに1つulしかない場合は、getElementsByTagName("ul")[0]または（そしてこれが望ましいかもしれません）そのidにul属性を追加し、それをgetElementById()で選択します。これにより、予想どおり、その1つだけが返されますid。

参照：

5
David Thomas