Apendchild no funciona

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, se lanza Uncaught TypeError: Object #<NodeList> has no method 'appendChild'.¿Alguna idea de por qué?

Answer 1

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

Entonces podría hacer, por ejemplo:

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

Pero, ¿por qué no usa simplemente getElementById() , si esa 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: asegúrese de declarar ul como una variable local a su función (agregue var), a menos que quiera usarlo fuera de la función.

Answer 2

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

Necesita hacer un bucle en 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 tiene es que getElementsByTagName() (tenga en cuenta que el plural implícito por el 's' en nombre de la función) devuelve una matriz de los nodos DOM, no es un solo nodo DOM, que es lo que esappendChild() espera trabajar en;Por lo tanto, debe identificar cuál de la matriz de nodos 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 solo hay uno ul en la página, podría usar getElementsByTagName("ul")[0] o (y esto puede ser preferible) Agregar un atributo id a ese ul y luego seleccioneCon getElementById(), que, como se esperaba, devolverá solo ese id.

Referencias:

• getElementsByTagName() .
• getElementById() .