Hola gente, soy nuevo en JS World.
Estoy tratando de agregar A <div> dinámicamente a mi HTML con la ayuda de JavaScript.
var counter = 0; function add_more_animals() { counter+=1; html = `<div id="animal${counter}"> <input type="text" name="animalName${counter}"> <input type="text" name="animalType${counter}"> </div>`; var form = document.getElementById("animals"); form.innerHTML+=html; } <div id="animals"> <div id="animal0"> <input type="text" name="animalName0"> <input type="text" name="animalType0"> </div> </div> <button type="button" onclick="add_more_animals()">Add animals (+)</button> Mientras completo los campos de animalName0 y animalType0 en UI. Después de hacer clic en el botón Agregar para insertar más datos de animales, se crea un nuevo div según la lógica JS escrita en el archivo. Pero mis entradas anteriores a animalName0 y animalType0 se vacían y tengo que insertar datos allí nuevamente.
¿Puedes ayudar aquí?
El problema es que la línea form.innerHTML+=html es una abreviatura de form.innerHTML = form.innerHTML + html . Cuando toma form.innerHTML para agregarlo al html , solo toma el HTML. El texto escrito en las entradas no es parte del HTML. Luego, cuando configura el HTML interno, piense form.innerHTML = form.innerHTML + html , se crean nuevos elementos HTML basados solo en HTML. Cualquier estado, incluido el texto escrito, se pierde. Cualquier detector de eventos también se perderá en este proceso.
La forma adecuada de agregar un nuevo elemento y dejar los elementos adyacentes en su lugar es crear el nuevo elemento con document.createElement y agregarlo con una función como .appendChild , así
var counter = 0 function add_more_animals() { counter+=1; // Create an empty element const newEl = document.createElement('div') newEl.id = `catalogue${counter}` // Add the first input const nameInput = document.createElement('input') nameInput.name = `animalName${counter}` newEl.appendChild(nameInput) // Now the second one const typeInput = document.createElement('input') typeInput.name = `animalType${counter}` newEl.appendChild(typeInput) // And finally attach everything to the animals form document.getElementById("animals").appendChild(newEl) } <div id="animals"> <div id="animal0"> <input type="text" name="animalName0"> <input type="text" name="animalType0"> </div> </div> <button type="button" onclick="add_more_animals()">Add animals (+)</button>Como puede imaginar, esto puede volverse detallado si tiene una gran cantidad de HTML para agregar. Para facilitar este proceso, crearon etiquetas de plantilla que quizás prefiera usar. Úsalos así o así .