HTML Template Tag

The template Element

The template tag defines a block of HTML markup that remains inert and completely hidden when the webpage loads. It serves as a reusable template container that you can copy and instantiate dynamically using JavaScript.

Example: The template Element

<template id="card-template">
  <p>Card content</p>
</template>

Cloning Template Content

To display template content on your page, you write a JavaScript script to capture the template's ID, access its content, clone its node structure using cloneNode(true), and append it to your page layout.

Example: Cloning Template Content

<template id="card-template">
  <p>Card content</p>
</template>
<script>
  const clone = document.getElementById('card-template').content.cloneNode(true);
  document.body.appendChild(clone);
</script>

Injecting Data into Templates

Once you have cloned the template content, you can easily target its internal elements (like heading or paragraph tags) in your scripts to inject custom data values before appending the clone to your page layout.

Example: Injecting Data into Templates

<template id="card-template">
  <p class="name"></p>
</template>
<script>
  const clone = document.getElementById('card-template').content.cloneNode(true);
  clone.querySelector('.name').textContent = 'Alex';
  document.body.appendChild(clone);
</script>

Performance Benefits of template

Before the template element was introduced, developers had to build dynamic layouts by creating elements manually inside long, slow JavaScript loops or using innerHTML strings, which forced browsers to rebuild their layouts and slowed down page performance.

Templates are parsed by the browser once, making them incredibly fast and efficient to clone.

Example: Performance Benefits of template

<template id="row-template">
  <li></li>
</template>
<script>
  for (let i = 0; i < 100; i++) {
    document.body.appendChild(document.getElementById('row-template').content.cloneNode(true));
  }
</script>

Conditional Layout Toggles

You can use template tags to store entire layout sections (like interactive modal forms, warning notices, or tool panels) that you only want to load when a user clicks a button or triggers an action.

Example: Conditional Layout Toggles

<template id="modal-template">
  <div class="modal">Warning notice</div>
</template>
<button onclick="document.body.appendChild(document.getElementById('modal-template').content.cloneNode(true))">
  Show Warning
</button>