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'. Любая идея почему?

Ответ 1

getElementsByTagName() не возвращает один элемент, он возвращает NodeList, который является массив-подобный объект. Это в основном означает, что вы можете использовать его как массив.

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

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

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

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

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

Ответ 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 
    }
}

Ответ 3

Проблема заключается в том, что getElementsByTagName() (обратите внимание на множественное число, подразумеваемое 's' в имени функции) возвращает массив узлов DOM, а не один DOM node, что означает 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] или (и это может быть предпочтительнее) добавить к этому ul атрибут id, а затем выбрать его с помощью getElementById(), который, как и ожидалось, вернет только один id.

Литература: