The template Tag

The template tag holds markup you plan to reuse, like a blueprint sitting in the document. Nothing inside a template ever renders. You can drop any normal HTML inside, and the browser parses it once, validates the markup, and waits until JavaScript asks for a copy.

It is the only tag whose content is parsed but invisible: no display:none tricks, no empty divs waiting in the layout. Scripts clone the template content and inject it wherever new cards, rows, or list items are needed. That makes it ideal for data-driven pages that render the same block over and over.

Why it exists: building HTML from JavaScript strings is fragile, full of quote bugs, and impossible to preview in an editor. A template keeps the markup in the page where the browser validates it. It is supported in every modern browser, and cloning takes a single call.

Cloning content

The content property holds the template as a document fragment. Calling content.cloneNode(true) makes a fresh copy with all inner elements intact. Each clone is independent, so you can fill them with different data without one clone affecting another.

const tpl = document.getElementById("card");
const copy = tpl.content.cloneNode(true);
document.body.appendChild(copy);

Why templates beat strings

Writing HTML inside JavaScript strings is hard to read and easy to break with quotes. A template keeps the markup in the document where it belongs. A common mistake is appending tpl.content directly instead of cloning it: that moves the fragment, so the second append inserts nothing.

Syntax

<template id="card">
  <div class="card">
    <h3>Title</h3>
    <p>Body text.</p>
  </div>
</template>

const clone = document.getElementById('row').content.cloneNode(true)
// not template.content - that moves! + listeners lost