のappendChildが動作しない

Question

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'がスローされます。どんな考え？

Answer 1

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

だから、たとえば行うことができます：

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

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

var ul = document.getElementById('datalist'); 

---

注：あなたは関数の外にそれを使用することを意味しない限り、（varを追加する）あなたの関数にローカル変数としてulを宣言するようにしてください。

Answer 2

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 
    } 
} 

Answer 3

あなたは持っている問題は、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); 
} 

だけ ulページ上にありますならば、あなたはgetElementsByTagName("ul")[0]またはを使用することができます（これは望ましいかもしれないことを覚えておいてください）id属性をulに追加し、getElementById()でそれを選択します。これは、期待どおりにidの1つを返します。

参考文献：

• getElementsByTagName()。
• getElementById()。