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
.
Литература: