<p>Click "Add" button to see what happens:</p>
<button id="btn-add">Add</button>
<button id="btn-rm">Remove</button>
<div id="container">
<!-- Template -->
</div>
* {box-sizing: border-box;}
body {
margin: 15px;
color: #222;
font: normal normal normal 1rem/1.6 Nunito Sans, Helvetica, Arial, sans-serif;
}
button {
border: none;
background-color: #0392cf;
color: #fff;
padding: 15px;
}
span {
color: #fff;
padding: 5px 10px;
margin: 2px;
display: inline-block;
}
.name {background-color: #fe4a49;}
.comment {background-color: #222;}
let container = document.querySelector("#container");
let btnAdd = document.querySelector("#btn-add");
let btnRm = document.querySelector("#btn-rm");
let data = [
{name: "John", comment: "That is great"},
{name: "Alex", comment: "It's helpful"},
{name: "David", comment: "Thanks a lot"}
];
let itemTemplate = (data) => {
return `
<div>
<span class="name">${data.name}</span>
</div>
<div>
<span class="comment">${data.comment}</span>
</div>
`;
}
btnAdd.addEventListener("click", () => {
data.forEach(item => {
let tmpl = itemTemplate(item);
let frag = document.createRange().createContextualFragment(tmpl);
container.appendChild(frag);
});
});
btnRm.addEventListener("click", () => {
while(container.firstChild) {
delete container.removeChild(container.firstChild);
}
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.