Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
<template id="card-template"> <div class="card mb-3"> <div class="card-body"> <h5 class="card-title"></h5> <p class="card-text"></p> </div> </div> </template> <div id="container"></div> <script> const tpl = document.getElementById("card-template"); const data = [{ title: "Card 1", text: "Content 1" }]; data.forEach(item => { const clone = tpl.content.cloneNode(true); clone.querySelector(".card-title").textContent = item.title; clone.querySelector(".card-text").textContent = item.text; document.getElementById("container").appendChild(clone); }); </script>
Result
Open