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() не возвращает один элемент, он возвращает NodeList , который является массивоподобным объектом. В основном это означает, что вы можете использовать его как массив.

Так что вы можете сделать, например:

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

Но почему бы вам просто не использовать getElementById(), если этот список в любом случае имеет идентификатор? Идентификаторы должны быть уникальными во всем документе, поэтому этот метод будет возвращать только один элемент.

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

---

Примечание: Обязательно объявите ul в качестве локальной переменной для вашей функции (добавьте var), если только вы не собираетесь использовать ее вне функции.

Answer 2

Ваша проблема в том, что 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.

Ссылки:

• getElementsByTagName().
• getElementById().

Answer 3

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