I'm trying to add an array of objects to the HTML page using the template element. I have added it but found that only the last object was added in HTML correctly. What a mistake I did? And how I should correct it? I'm also tried to do it with 'createElement' method and it was ok. Thanks
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>You need to clone the element, then append:
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>Make a copy of the content every iteration and append that. You are currently modifying and appending the same node over and over
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>