Code Ready | Frontend

<template> — храним HTML-разметку без её отображения на странице Когда структура элемента известна заранее, собирать её вручную через createElement() не всегда удобно: разметка смешивается с логикой и увеличивает объём js. Для таких случаев в HTML существует <template> — элемент для хранения готовой 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:

<template id="card-template">
  <article class="card">
    <h2 class="card__title"></h2>
    <button class="card__button">
      Открыть
    </button>
  </article>
</template>

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

<template>
  <h2>Карточка пользователя</h2>
</template>

Содержимое шаблона доступно через свойство content, которое представляет собой DocumentFragment:

const template = document.querySelector(
  '#card-template'
);

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

Поэтому искать элементы шаблона необходимо внутри content, а не через сам <template>:

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

template.content.querySelector('.card');
// <article class="card">...</article>

Для создания независимого экземпляра содержимое шаблона можно импортировать в текущий документ с глубоким копированием:

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')
);

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

<div hidden>
  <video src="video.mp4" autoplay></video>
</div>

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

<template id="video-template">
  <video src="video.mp4" autoplay></video>
</template>

Есть важный нюанс с событиями: обработчики, зарегистрированные через 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);

На практике <template> подходит для карточек, строк таблицы, элементов списка, уведомлений и других повторяемых частей интерфейса с заранее известной структурой:

function createUser(user) {
  const fragment = document.importNode(
    template.content,
    true
  );

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

  return fragment;
}

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