Cloning Templates with cloneNode

Deep vs Shallow Clone

const template = document.getElementById('card-tmpl');

// Deep clone (true): copies all descendants
const deep = template.content.cloneNode(true);

// Shallow clone (false): only the root node, no children
const shallow = template.content.cloneNode(false);
// shallow has no children — use deep for templates

Multiple Stamps from One Template

const tmpl = document.getElementById('item-tmpl');
const container = document.getElementById('list');

['Alpha', 'Beta', 'Gamma'].forEach((name, i) => {
  const clone = tmpl.content.cloneNode(true);
  clone.querySelector('.item-name').textContent = name;
  clone.querySelector('.item-num').textContent = i + 1;
  container.appendChild(clone);
});
// 3 separate clones — modifying one doesn't affect others

DocumentFragment and Performance

const frag = document.createDocumentFragment();
const tmpl = document.getElementById('row-tmpl');

rows.forEach(row => {
  const clone = tmpl.content.cloneNode(true);
  // fill in clone...
  frag.appendChild(clone);
});

// ONE DOM append instead of many:
document.getElementById('table-body').appendChild(frag);
// Appending to a fragment doesn't trigger layout; append once for performance

Cloning and Event Listeners

// Template definition:
const tmpl = document.getElementById('btn-tmpl');
const origBtn = tmpl.content.querySelector('.btn');
origBtn.addEventListener('click', () => console.log('click'));

// Clone:
const clone = tmpl.content.cloneNode(true);
const cloneBtn = clone.querySelector('.btn');
// cloneBtn does NOT have the click listener!
// You must re-add listeners after cloning

Adding Listeners After Clone

function createCard(data) {
  const clone = document.getElementById('card-tmpl').content.cloneNode(true);

  const deleteBtn = clone.querySelector('.delete-btn');
  deleteBtn.addEventListener('click', () => deleteItem(data.id));

  clone.querySelector('.title').textContent = data.title;

  return clone;  // return the fragment
}

document.getElementById('list').appendChild(createCard(item));

Using importNode

const tmpl = document.getElementById('card-tmpl');

// Equivalent to tmpl.content.cloneNode(true):
const clone = document.importNode(tmpl.content, true);
// importNode adopts the node into the current document
// In the same document, this is functionally identical to cloneNode

Template Slots Preview

<template id="card-tmpl">
  <div class="card">
    <slot name="title">Default Title</slot>
    <slot name="body">Default body text.</slot>
  </div>
</template>
<!-- slot elements become placeholders for projected content -->
<!-- Covered in full in the Shadow DOM course -->

Updating Cloned Content

const clone = tmpl.content.cloneNode(true);

// textContent — safe, no HTML parsing:
clone.querySelector('.name').textContent = user.name;

// innerHTML — only if content is trusted:
clone.querySelector('.bio').innerHTML = trustedHTML;

// setAttribute:
clone.querySelector('.avatar').src = user.avatar;
clone.querySelector('.profile-link').href = `/users/${user.id}`;

Comparing to document.createElement

// createElement: verbose for complex structures
const card = document.createElement('div');
card.className = 'card';
const title = document.createElement('h2');
card.appendChild(title);
// ... many lines for nested structure

// template: define once, clone efficiently
const clone = tmpl.content.cloneNode(true);
// Complex structure defined in HTML once
// Clone is fast and the template handles nesting

Memory and Templates

Browser Support

Quick Check

Recap: cloneNode