How to use the HTML5 template tag

The HTML5 <template> tag stores inert, reusable HTML content that can be cloned with JavaScript; it remains unrendered until programmatically inserted, making it ideal for dynamically generating elements like product cards without reloading or hardcoding, and it supports advanced features like data attributes and slots for flexible, organized, and performant DOM manipulation.

The HTML5 <template></template> tag is a handy way to store HTML content that you don’t want to render immediately when the page loads. Instead, you can clone and insert this content later using JavaScript. It's perfect for dynamically adding elements like cards, forms, or list items without hardcoding them repeatedly or fetching HTML from external sources.

Here’s how to use it effectively.

What the template tag does

The <template></template> element holds content that is:

• Not rendered on the page when the document loads.
• Parsed but inert — scripts inside don’t run, images don’t load, custom elements aren’t upgraded.
• Available for cloning via JavaScript when needed.

This makes it ideal for reusable UI components created on the fly.

Basic usage example

Let’s say you want to dynamically add product cards to a page.

<template id="product-card-template">
  <div class="product-card">
    <h3 class="product-title"></h3>
    <p class="product-price"></p>
    <button>Buy Now</button>
  </div>
</template>

<div id="product-container"></div>

Now use JavaScript to clone the template and populate it:

// Get the template and container
const template = document.getElementById('product-card-template');
const container = document.getElementById('product-container');

// Function to add a new product
function addProduct(title, price) {
  // Clone the template content
  const clone = document.importNode(template.content, true);

  // Update the cloned elements
  clone.querySelector('.product-title').textContent = title;
  clone.querySelector('.product-price').textContent = `$${price}`;

  // Append to the container
  container.appendChild(clone);
}

// Add some products
addProduct('Laptop', 999);
addProduct('Mouse', 25);

Now two product cards appear — created from the template.

Key points when working with templates

• Use document.importNode() or template.content.cloneNode()
  Always clone the .content of the template (which is a DocumentFragment). This avoids modifying the original template.

• Deep clone with true
  Pass true as the second argument to importNode() or cloneNode() to ensure all child nodes are copied.

• Templates are not limited to one use
  You can use the same template to create multiple instances across your app.

• Works well with shadow DOM and web components
  Templates are often used inside custom elements to define internal structure.

• No need to hide templates with CSS
  The content inside <template> is automatically not displayed — no display: none required.

Advanced: Pre-fill template with data attributes or slots

You can design more flexible templates using data-* attributes or the <slot> element (especially useful with web components).

<template id="user-card">
  <div class="user-card">
    <img src="" alt="" class="avatar">
    <h2 class="name"></h2>
    <span class="role" data-role></span>
  </div>
</template>

Then fill in values including src, alt, and data attributes as needed in JavaScript.

Basically, the <template></template> tag gives you a clean, performant way to manage reusable HTML. It’s not flashy, but it keeps your DOM clean and your dynamic content organized.

The above is the detailed content of How to use the HTML5 template tag. For more information, please follow other related articles on the PHP Chinese website!