Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
The <template> element holds HTML content that is not rendered when the page loads but can be cloned and inserted into the document using JavaScript.
Content inside template is not rendered on page load
Clone the template multiple times for repeating patterns
Better performance than creating HTML from strings
<template id="my-template">...content...</template>const clone = template.content.cloneNode(true)container.appendChild(clone)<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Template Element Basics</title>
</head>
<body>
<div class="container">
<h1>📋 Template Element Demo</h1>
<p style="text-align: center; color: #6b7280; margin-bottom: 20px;">
Click the button to create cards from the template!
</p>
<div class="controls">
<button onclick="addCard()">✨ Add Card from Template</button>
</div>
<!-- Template - Not rendered on page load -->
<template id="card-template">
<div class="card">
<h3>Card Title</h3>
<p>This content was cloned from a template element!</p>
</div>
</template>
<!-- Container for cloned cards -->
<div id="card-container"></div>
<div class="info">
<strong>💡 How It Works:</strong>
<p>The template element's content is hidden but can be cloned and inserted into the DOM using JavaScript.</p>
</div>
</div>
</body>
</html>Loading preview...
idgetElementById()template.content.cloneNode(true)appendChild()<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic List with Template</title>
</head>
<body>
<div class="container">
<h1>🛍️ Product List Manager</h1>
<div class="form-card">
<h2 style="color: #10b981; margin-bottom: 20px;">Add New Product</h2>
<form id="product-form">
<div class="form-group">
<label for="name">Product Name</label>
<input type="text" id="name" placeholder="Enter product name" required>
</div>
<div class="form-group">
<label for="price">Price</label>
<input type="number" id="price" placeholder="0.00" step="0.01" required>
</div>
<div class="form-group">
<label for="description">Description</label>
<textarea id="description" placeholder="Enter product description" required></textarea>
</div>
<button type="submit">➕ Add Product</button>
</form>
</div>
<!-- Product Template -->
<template id="product-template">
<div class="product-item">
<div class="product-header">
<div class="product-name"></div>
<div class="product-price"></div>
</div>
<div class="product-description"></div>
<div class="product-footer">
<span class="product-id"></span>
<button class="delete-btn" onclick="deleteProduct(this)">🗑️ Delete</button>
</div>
</div>
</template>
<div class="list-container">
<h2>📦 Product List</h2>
<div id="products">
<div class="empty-state">
No products yet. Add one above! 👆
</div>
</div>
</div>
</div>
</body>
</html>Loading preview...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Template with Web Components</title>
</head>
<body>
<div class="container">
<h1>👥 Team Members</h1>
<!-- User Card Template -->
<template id="user-card-template">
<div class="user-card">
<div class="card-header">
<div class="avatar"></div>
<div class="user-name"></div>
<div class="user-role"></div>
</div>
<div class="card-body">
<div class="info-row">
<div class="info-icon">📧</div>
<div class="info-content">
<div class="info-label">Email</div>
<div class="info-value user-email"></div>
</div>
</div>
<div class="info-row">
<div class="info-icon">📱</div>
<div class="info-content">
<div class="info-label">Phone</div>
<div class="info-value user-phone"></div>
</div>
</div>
<div class="info-row">
<div class="info-icon">📍</div>
<div class="info-content">
<div class="info-label">Location</div>
<div class="info-value user-location"></div>
</div>
</div>
</div>
</div>
</template>
<div class="grid" id="team-container"></div>
</div>
</body>
</html>Loading preview...
// Dangerous and slow
const html = '<div>' +
'<h3>' + title + '</h3>' +
'<p>' + text + '</p>' +
'</div>';
container.innerHTML = html;// Safe and fast
const clone = template
.content.cloneNode(true);
clone.querySelector('h3')
.textContent = title;
container.appendChild(clone);cloneNode(true) for deep clonestextContent to prevent XSSinnerHTML for dynamic contentcloneNode(false) for shallow clonesTodo lists, shopping carts, comment threads
Product cards, user profiles, blog posts
Dynamic table rows from API data
Shadow DOM content, custom elements
<template> element is supported in all modern browsers: Chrome 26+, Firefox 22+, Safari 8+, Edge 13+. IE does not support it. For older browsers, use a polyfill.