Estoy tratando de crear un módulo que contenga un gran grupo de elementos html en Javascript y uso for loop para crear muchos de los módulos. El siguiente es un ejemplo (tengo más elementos html en el módulo, pero para crear un ejemplo mínimo, reduzco la mayoría de ellos.
function create() { for (let i = 0; i < 20; i++) { let img = document.createElement('img') //img.src = source[i].url let pho = document.createElement('div') pho.className = 'pho' let button = document.createElement('button') button.textContent = "♡" let border = document.createElement('div') let hr = document.createElement('hr') pho.appendChild(button) pho.appendChild(img) border.appendChild(hr) border.appendChild(pho) document.body.appendChild(border) } } create() En el ejemplo anterior, intento usar appendChild para crear un elemento principal ( border ) que contiene varios elementos secundarios.
Funciona encontrar, pero el código parece demasiado masivo y difícil de manejar si tengo más de ellos.
¿Alguien podría sugerirme una mejor manera de hacer esto?
¡Gracias por cualquier respuesta!
¿Usar una cadena HTML en su lugar?
const createBorder = (url) => { const div = document.body.appendChild(createElement('div')); div.innerHTML = ` <hr> <div class="pho"> <button>♡</button> <img> </div> `; // avoid XSS vulnurabilities by not interpolating the dynamic value // directly into the HTML string div.querySelector('img').src = url; }; function create() { for (let i = 0; i < 20; i++) { createBorder(source[i].url); } }