appendChild que no trabaja

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

Cuando llamo add, Uncaught TypeError: Object #<NodeList> has no method 'appendChild' es lanzada. ¿Alguna idea de por qué?

Answer 1

getElementsByTagName() no devuelve un elemento, devuelve NodeList, que es un objeto similar a un array. Básicamente significa que puede usarlo como una matriz.

Por lo que podría hacer por ejemplo:

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

Pero ¿por qué no simplemente usar getElementById(), en caso de que la lista tiene un ID de todos modos? Los ID deben ser únicos en todo el documento, por lo que este método solo devolverá un elemento.

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

---

Nota: por favor asegúrese de declarar ul como una variable local a la función (añadir var), a menos que significas para utilizarlo fuera de la función.

Answer 2

document.getElementsByTagName no devuelve un Elemento, pero devuelve una matriz de elementos.

Debe hacer un ciclo de esta matriz u obtener algún Elemento único.

Mire esta documentación: 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

El problema que tenemos es que getElementsByTagName() (nótese el plural implica la 's' en el nombre de la función) devuelve una matriz de nodos DOM, no un solo nodo DOM, que es en lo que appendChild() espera trabajar; Por lo tanto, es necesario identificar cuál de la serie de nodos que desea trabajar con:

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

Recuerde que si sólo hay unoul en la página, usted podría utilizar getElementsByTagName("ul")[0]o (y esto puede ser preferible) agregue un atributo id a ese ul y luego selecciónelo con getElementById(), que devolverá, como se esperaba, solo ese id.

Referencias:

• getElementsByTagName().
• getElementById().