Template Clone Cards - JavaScript Client

A template element is cloned for each item so client code can render repeated cards without building HTML strings.

Program

template keeps inert markup in the document. JavaScript can clone its content when data arrives.

template_clone_cards.html

<template id="card-template"><article><h2></h2><p></p></article></template>
<section id="cards"></section>
<script>
  const template = document.querySelector("#card-template");
  const cards = document.querySelector("#cards");
  const item = { title: "Latency", body: "42 ms" };
  const clone = template.content.cloneNode(true);
  clone.querySelector("h2").textContent = item.title;
  clone.querySelector("p").textContent = item.body;
  cards.append(clone);
</script>

template template stores markup that is not rendered until cloned.

cloneNode cloneNode copies a DOM subtree for insertion elsewhere.