Básicamente, estoy tratando de borrar primero el formulario div diciendo form.innerHTML = '' . Luego, cuando trato de insertar uno por uno los elementos de una matriz de regreso al formulario div usando forEach() en la matriz, simplemente establece el innerHTML interno en el último elemento de una matriz.
Aquí está mi código JavaScript :
form.innerHTML = ''; userCorrectAnswers.forEach(e => { let cA = e.innerHTML; form.innerHTML = cA; }); Necesito saber cómo puedo agregar todos los elementos de esa matriz al innerHTML del formulario.
Dado que userCorrectAnswers es una matriz de elementos, useElement.append()
form.append(...userCorrectAnswers); // DOM utility functions: const EL = (sel, par) => (par||document).querySelector(sel); const ELNew = (tag, prop) => Object.assign(document.createElement(tag), prop); // Task Example: const form = EL("#form"); const userCorrectAnswers = [ ELNew("div", {textContent:"Lorem"}), ELNew("div", {textContent:"Ipsum"}), ELNew("div", {textContent:"Dolor"}), ]; form.append(...userCorrectAnswers); <div id="form"></div> El ejemplo anterior que usa .append() se usa para mover elementos recién creados o existentes a otro Elemento. Esto preservará cualquier dato de Elementos o Eventos previamente asignados.
Si no desea mover sus elementos sino clonarlos , useElement.cloneNode (true) como:
form.append(...userCorrectAnswers.map(el => el.cloneNode(true)));Para reducir un Array a String, use Array.prototype.reduce()
form.innerHTML = userCorrectAnswers.reduce((str, el) => str += el.innerHTML, ""); // DOM utility functions: const EL = (sel, par) => (par||document).querySelector(sel); const ELNew = (tag, prop) => Object.assign(document.createElement(tag), prop); // Task Example: const form = EL("#form"); const userCorrectAnswers = [ ELNew("div", {textContent:"Lorem"}), ELNew("div", {textContent:"Ipsum"}), ELNew("div", {textContent:"Dolor"}), ]; form.innerHTML = userCorrectAnswers.reduce((html, el) => html += el.outerHTML, ""); <div id="form"></div>El ejemplo anterior no es el mejor, ya que simplemente copia la cadena HTML, ignorando cualquier evento o dato previamente asignado a Elements.
Hace uso de outerHTML (en lugar de HTML interno) para incluir la etiqueta del elemento de destino seleccionado, así como su contenido. Use innerHTML si es necesario de lo contrario.
Si realmente desea hacer esto a través de texto HTML, cree todo el texto y luego haga que el navegador lo analice todo a la vez:
form.innerHTML = userCorrectAnswers.map(e => e.innerHTML).join(""); Tenga en cuenta que eso toma el HTML interno de los elementos. Si quisiera los elementos en sí mismos, no solo su contenido, sería outerHTML :
form.innerHTML = userCorrectAnswers.map(e => e.outerHTML).join(""); // −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^^^^ Pero si eso es lo que está haciendo, podría considerar copiar los elementos a travéscloneNode :
form.innerHTML = ""; for (const element of userCorrectAnswers) { form.appendChild(element.cloneNode(true)); }... por lo que no es necesario crear primero una cadena HTML a partir del elemento y luego analizarla nuevamente para colocarla en el formulario.