Estoy tratando de agregar una serie de objetos a la página HTML usando el elemento de plantilla. Lo agregué pero descubrí que solo el último objeto se agregó correctamente en HTML. ¿Qué error cometí? ¿Y cómo debo corregirlo? También intenté hacerlo con el método 'createElement' y estuvo bien. Gracias
let array = [ { city: 'Rome', country: 'Italy' }, { city: 'Moscow', country: 'Russia' } ]; const template = document.querySelector('#template'); const clone = template.content.cloneNode(true); const listElement = clone.querySelector('.template-list'); const lists = document.querySelector('.lists'); array.forEach(i => { listElement.querySelector('.template-city').textContent = i.city; listElement.querySelector('.template-country').textContent = i.country; lists.append(listElement); }) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <ul class="lists"> </ul> <template id="template"> <li class="template-list"> <p class="template-city"></p> <p class="template-country"></p> </li> </template> <script src="./script.js"></script> </body> </html>Necesita clonar el elemento, luego agregar:
let array = [{ city: 'Rome', country: 'Italy' }, { city: 'Moscow', country: 'Russia' } ]; const template = document.querySelector('#template'); const clone = template.content.cloneNode(true); const listElement = clone.querySelector('.template-list'); const lists = document.querySelector('.lists'); array.forEach(i => { let newClone = listElement.cloneNode(true) newClone.querySelector('.template-city').textContent = i.city; newClone.querySelector('.template-country').textContent = i.country; lists.append(newClone); }) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <ul class="lists"></ul> <template id="template"> <li class="template-list"> <p class="template-city"></p> <p class="template-country"></p> </li> </template> <script src="./script.js"></script> </body> </html>Haga una copia del contenido en cada iteración y agréguela. Actualmente está modificando y agregando el mismo nodo una y otra vez
let array = [{ city: 'Rome', country: 'Italy' }, { city: 'Moscow', country: 'Russia' } ]; const template = document.querySelector('#template'); const lists = document.querySelector('.lists'); array.forEach(i => { const clone = template.content.cloneNode(true); clone.querySelector('.template-city').textContent = i.city; clone.querySelector('.template-country').textContent = i.country; lists.append(clone); }) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <ul class="lists"> </ul> <template id="template"> <li class="template-list"> <p class="template-city"></p> <p class="template-country"></p> </li> </template> <script src="./script.js"></script> </body> </html>