Primer intento de cualquier tipo de Javascript, así que sé amable, ajá
Logré que la página agregue el nuevo elemento de la lista al html interno de una lista desordenada, pero cada vez después de eso, solo reemplaza la inicial.
Siento que me estoy perdiendo algo realmente básico aquí.
Cualquier consejo sería muy apreciado.
<script> function addItem() { var item = document.getElementById("task-field").value; document.getElementById("task-list").innerHTML = "<li> " + item + " </li>"; } </script><script> function addItem(item) { const li = document.createElement('li'); li.innerHTML = `${item}`; li.id = 'task-field'; document.getElementById('task-list').appendChild(li); } </script>Usar
document.getElementById("task-list").innerHTML += "<li> " + item + " </li>";en vez de
document.getElementById("task-list").innerHTML = "<li> " + item + " </li>"; El operador += usará el valor actual de innerHTML y agregará su nuevo contenido en este caso. Esto según lo sugerido por @Hassam Imam.
Otra forma de hacerlo es usando appendChild() creando el nuevo elemento <li> a través de JS. Como esto:
function addItem() { let item = document.getElementById("task-field").value; let parent = document.getElementById("task-list"); // Create new node. let li_item = document.createElement("li"); li_item.innerHTML = item; // Append child. parent.appendChild(li_item); } Pero este último método es probablemente demasiado largo. La solución += parece buena. Sólo otra forma de hacerlo.