The template element holds inert HTML not rendered on load. Clone with template.content.cloneNode(true), fill in data, and append to the DOM. Safer than building HTML strings with innerHTML and concatenation.
<template> Element
<template id="card-tmpl">
<div class="card">
<h3 class="card-title"></h3>
<p class="card-body"></p>
</div>
</template>
<script>
const tmpl = document.getElementById("card-tmpl");
const clone = tmpl.content.cloneNode(true);
clone.querySelector(".card-title").textContent = "Hello";
document.body.appendChild(clone);
</script>