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' бросается. Есть идеи почему?

14
dom dom-traversal javascript

3 ответов

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

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

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

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

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

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

23

документ.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

проблема в том, что 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] или (и это может быть предпочтительнее) добавить

5