¿Cómo creo elementos HTML dinámicamente a partir de una matriz?
Por ejemplo, si obtuve una matriz const data = ['123', '456', '789'] , y quiero crear una etiqueta p de HTML para cada valor de la matriz. Intenté usar el método foreach pero no funciona, ¿algo que haya hecho mal hasta ahora? A continuación se muestra el código:
const ct = document.querySelector('.ct'); const data = ['123', '456', '789']; const createNewElement = '<p>' + data.forEach((elm) => '<a>elm</a>') + '</p>'; ct.insertAdjacentHTML('beforeend', createNewElement); <div class="ct"></div>Simplemente puede usar el mapa, pero map es devolver una nueva matriz. Después de eso, use join para devolver una cadena.
const ct = document.querySelector('.ct'); const data = ['123', '456', '789']; const createNewElement = '<p>' + data.map((elm) => '<a>' + elm + '</a>').join('') + '</p>'; ct.insertAdjacentHTML('beforeend', createNewElement); Usar todo lo que usó y solo usar appendChild es la solución más fácil.
let ct = document.querySelector(".ct"); const arr = [100,102,900]; arr.forEach(value=>{ const currentElement = document.createElement("a"); currentElement.innerHTML = value + "<br/>"; ct.appendChild(currentElement); }) <p class="ct"></p>otra forma de hacerlo es hacer una cadena de html y simplemente insertarla en el elemento donde desea esos elementos
let ct = document.querySelector(".ct"); const arr = [100,102,900]; let fullHTML = ""; arr.forEach(value=>{ fullHTML += "<p>"+value+"</p>"; }) ct.innerHTML = fullHTML; <div class="ct"></div>Enlaces para aprender más sobre esto
Debe usar Array.prototype.map en lugar de forEach , el método map de una matriz devuelve una nueva matriz, lo que le permite guardarla dentro de la constante createNewElement , mientras que el método forEach en una matriz ejecuta algo en cada elemento dentro de la matriz sin devolviendo una nueva matriz.
el .join('') utilizado al final es convertir la matriz ( createNewElement ) en una cadena, uniendo cada elemento de la matriz sin delimitadores (el delimitador predeterminado es la coma , ).
Lea más sobre el método Array.prototype.map() aquí
const ct = document.querySelector('.ct'); const data = ['123', '456', '789']; const createNewElement = data.map((elm) => '<p><a>' + elm + '</a></p>') console.log(createNewElement) ct.insertAdjacentHTML('beforeend', createNewElement.join('')); <div class="ct"></div>