Back to Docs

<template>

Description

The <template> HTML element is a mechanism for holding HTML client-side content that is not to be rendered when the page is loaded, but can be instantiated later during runtime using JavaScript. The browser parses the template contents to ensure validity, but it remains completely inert (images don't download, scripts don't execute) until cloned and appended to the visible DOM.

Code Snippet

<button id="renderBtn">Render Card</button>
<div id="cardContainer"></div>

<template id="productCard">
    <article class="product-card">
        <h3>Wireless Mouse</h3>
        <p>Price: ₹799</p> 
        <button>Add to Cart</button>
    </article>
</template>

<script>
    const template = document.getElementById('productCard');
    const container = document.getElementById('cardContainer');
    const renderBtn = document.getElementById('renderBtn');

    renderBtn.addEventListener('click', () => {
        // Clone the content inside the template
        const clonedContent = template.content.cloneNode(true);
        // Append the cloned content to the container
        container.appendChild(clonedContent);
    });
</script>

Static Live Preview

localhost/template-static.html

Interactive Playground

localhost/template-interactive.html