¿Cómo agrego iterativamente elementos secundarios a (por ejemplo) a .
<ul id="my-list"> <li>item 1</li> <li>item 2</li> </ul>Si tengo un script JS que ejecuta algo como esto varias veces:
document.getElementById('my-list').appendChild('someListItemICreated')los 2 elementos de la lista actual se eliminan. ¿Cómo agrego nuevos elementos li a la ul sin perder los elementos de la lista actual?
Debe proporcionar un elemento como argumento para appendChild y no una cadena. Como esto:
const li = document.createElement("li"); li.innerText = "Item 3"; document.getElementById("my-list").appendChild(li); <ul id="my-list"> <li>Item 1</li> <li>Item 2</li> </ul>Un enfoque mucho más fácil y limpio que prefiero en la mayoría de los casos es:
document.getElementById("my-list").innerHTML += "<li>Item 3</li>"; <ul id="my-list"> <li>Item 1</li> <li>Item 2</li> </ul>Creo que debe ser más específico con lo que realmente está haciendo su código, pero puedo decir que someListItemICreated no debería ser una cadena, si eso es lo que está pasando. Aquí hay un ejemplo que hice que es similar a lo que te refieres que funciona bien.
<ul id="my-list"> <li>Item 1</li> <li>Item 2</li> </ul> let someListItemICreated = document.createElement("li"); someListItemICreated.appendChild(document.createTextNode("item 3")); document.getElementById("my-list").appendChild(someListItemICreated) const c = document.createElement('li'); c.innerText = 'item 3'; document.getElementById('my-list').appendChild(c); <ul id="my-list"> <li>item 1</li> <li>item 2</li> </ul>