HTML Templates

Template element, cloning content, and dynamic rendering.

Overview

Templates provide reusable markup that isn't rendered until activated.

Key Concepts

• Template Element — Hidden content
• Content Property — Access template content
• Clone Node — Duplicate template content
• Dynamic Rendering — Fill template with data
• Performance — Pre-compiled markup

Code Examples

<template id="userTemplate">
  <div class="user-card">
    <h3></h3>
    <p class="email"></p>
    <p class="role"></p>
  </div>
</template>

<template id="errorTemplate">
  <div class="error-message">
    <span class="error-icon">⚠️</span>
    <span class="error-text"></span>
  </div>
</template>

<div id="users"></div>

<script>
const users = [
  { name: 'John', email: 'john@example.com', role: 'Admin' },
  { name: 'Jane', email: 'jane@example.com', role: 'User' },
  { name: 'Bob', email: 'bob@example.com', role: 'Editor' }
];

const template = document.getElementById('userTemplate');
const container = document.getElementById('users');

users.forEach(user => {
  const clone = template.content.cloneNode(true);
  
  clone.querySelector('h3').textContent = user.name;
  clone.querySelector('.email').textContent = user.email;
  clone.querySelector('.role').textContent = user.role;
  
  container.appendChild(clone);
});

// Dynamic template rendering
function renderError(message) {
  const template = document.getElementById('errorTemplate');
  const clone = template.content.cloneNode(true);
  
  clone.querySelector('.error-text').textContent = message;
  
  return clone;
}

document.body.appendChild(renderError('Something went wrong!'));
</script>

<style>
.user-card {
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin: 8px 0;
}

.user-card h3 {
  margin: 0 0 8px 0;
}

.user-card .email {
  color: #666;
  margin: 0 0 4px 0;
}

.user-card .role {
  color: #007bff;
  font-weight: bold;
  margin: 0;
}

.error-message {
  display: flex;
  align-items: center;
  padding: 12px;
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 4px;
  color: #721c24;
}
</style>

Practice

Build a dynamic list using templates with add/remove functionality.