¿Por qué el código hace una salida diferente y es casi la misma entrada? Aporte:
var Add = document.getElementById('AddElement'); //the button var Element = document.getElementById('element'); // the input text var ListParent = document.querySelector('ul'); Add.addEventListener('click', function(){ var AddText = document.createElement('li').appendChild(document.createTextNode("hello")); ListParent.appendChild(AddText); })Producción:
primer clic: hola
segundo clic: hola hola
Input: var Add = document.getElementById('AddElement'); var Element = document.getElementById('element'); var ListParent = document.querySelector('ul'); Add.addEventListener('click', function(){ var AddText = document.createElement('li'); AddText.appendChild(document.createTextNode('hello')); ListParent.appendChild(AddText); })Salida: primer clic:
segundo clic:
appendChild devuelve el nodo adjunto:
const div = document.createElement('div'); const parent = document.createElement('div'); const result = parent.appendChild(div); console.log(result === div);Así que cuando lo hagas
var AddText=document.createElement('li').appendChild(document.createTextNode("hello")); ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ El valor puesto en addText es el nodo de texto creado. En contraste con
var AddText = document.createElement('li'); es el <li> , no el nodo de texto.
Entonces, con el primer enfoque, el <li> creado no se usa (y probablemente no sea lo que desea).
Si desea usar el <li> y reducir su código, asigne el .textContent del <li> en su lugar.
Add.addEventListener('click', function(){ ListParent.appendChild(document.createElement('li')) .textContent = element.value; })