— храним HTML-разметку без её отображения на странице

Когда структура элемента известна заранее, собирать её вручную через createElement() не всегда удобно: разметка смешивается с логикой и увеличивает объём js. Для таких случаев в HTML существует — элемент для хранения готовой DOM-заготовки без её отображения на странице:
const card = document.createElement('article');
const title = document.createElement('h2');
const button = document.createElement('button');

card.className = 'card';
title.className = 'card__title';
button.className = 'card__button';

card.append(title, button);

Ту же структуру можно описать декларативно непосредственно в HTML:




Открыть




Браузер парсит содержимое как HTML, но не отображает его и не включает в активное дерево документа:

Карточка пользователя


Содержимое шаблона доступно через свойство content, которое представляет собой DocumentFragment:
const template = document.querySelector(
'#card-template'
);

console.log(template.content);
// DocumentFragment

Поэтому искать элементы шаблона необходимо внутри content, а не через сам :
template.querySelector('.card');
// null

template.content.querySelector('.card');
// ...

Для создания независимого экземпляра содержимое шаблона можно импортировать в текущий документ с глубоким копированием:
const fragment = document.importNode(
template.content,
true
);

document.body.append(fragment);

Аргумент true означает глубокое копирование вместе со всеми вложенными узлами. До вставки экземпляр можно заполнить данными, не изменяя исходный шаблон:
const fragment = document.importNode(
template.content,
true
);

fragment.querySelector('.card__title').textContent =
'JavaScript';

document.body.append(fragment);

Один шаблон можно использовать многократно, каждый раз получая независимую DOM-структуру:
function createCard(title) {
const fragment = document.importNode(
template.content,
true
);

fragment.querySelector('.card__title').textContent =
title;

return fragment;
}

document.body.append(
createCard('JavaScript'),
createCard('TypeScript'),
createCard('Node.js')
);

не следует путать с обычным скрытым контейнером: hidden скрывает элемент визуально, но его содержимое остаётся частью документа:




У содержимое хранится отдельно и становится частью активного DOM только после создания и вставки экземпляра:




Есть важный нюанс с событиями: обработчики, зарегистрированные через addEventListener(), при копировании DOM-структуры не переносятся:
const button =
template.content.querySelector('.card__button');

button.addEventListener('click', handler);

const fragment = document.importNode(
template.content,
true
);

Обработчик необходимо назначить уже созданному экземпляру либо использовать делегирование событий:
const button =
fragment.querySelector('.card__button');

button.addEventListener('click', handler);

На практике подходит для карточек, строк таблицы, элементов списка, уведомлений и других повторяемых частей интерфейса с заранее известной структурой:
function createUser(user) {
const fragment = document.importNode(
template.content,
true
);

fragment.querySelector('.card__title').textContent =
user.name;

return fragment;
}

🔥 позволяет хранить HTML-заготовку вне активного DOM и создавать из неё независимые экземпляры по мере необходимости, оставляя структуру в HTML, а работу с данными и поведением — в js.

📣 Code Ready | #практика