Использование template для отображения с JavaScript

Элемент <template> содержит HTML-код, который не отображается, пока не будет клонирован и вставлен с помощью JavaScript. Его содержимое инертно: скрипты не выполняются, изображения не загружаются, стили не применяются — до активации template.

Содержимое template находится в объекте DocumentFragment по адресу template.content. Чтобы использовать его, клонируйте фрагмент: const clone = template.content.cloneNode(true). Аргумент true выполняет глубокое клонирование, включая все узлы-потомки.

Настройте клон перед вставкой: выполните поиск внутри клона, задайте текстовое содержимое и добавьте обработчики событий. Затем добавьте его в DOM: container.appendChild(clone). Каждый вызов cloneNode() создаёт независимую копию — изменяйте одну копию, не затрагивая остальные.

Объединяйте template с Array.forEach или Array.map для отрисовки списков: для каждого элемента данных клонируйте template, подставляйте значения и добавляйте элемент в контейнер списка. Этот подход похож на фреймворк, но основан на стандартных HTML и JavaScript.

Определите <template>, содержащий <tr> с ячейками. Клонируйте и заполняйте его для каждой строки данных. Это избавляет от конкатенации строк при создании HTML-кода — экранирование не требуется, поскольку Вы задаёте textContent, а не innerHTML.

template никогда не отображается автоматически. Это позволяет безопасно хранить фрагменты, которые должны отображаться при определённых условиях: показывать template «нет результатов» только при пустом результате поиска, template ошибки — только при сбое сети, а скелетон загрузки — во время получения данных.

template может содержать другие template — вложенные template остаются инертными внутри DocumentFragment внешнего template. Это позволяет создавать иерархии, похожие на компоненты: внешний template клонирует, а затем при необходимости активирует внутренние template.

Стили внутри тега <style> template не применяются к документу — они остаются инертными, пока template не будет создан, а его содержимое не переместится в активный DOM. Это позволяет template содержать собственные стили, не загрязняя страницу.

Разбор innerHTML — это синхронная обработка HTML-строки: HTML разбирается заново при каждом вызове. template.cloneNode() копирует уже разобранное дерево. При многократной отрисовке одной и той же структуры клонирование template выполняется быстрее и устраняет риски XSS, связанные с конкатенацией строк.

Элемент template не имеет встроенной привязки данных — необходимо вручную находить и заполнять каждый клон. Для сложных задач привязки данных лучше подходит фреймворк или библиотека. template предназначен для простых подходов к ручной отрисовке без накладных расходов фреймворка.

Элемент template поддерживается всеми современными браузерами (IE11 поддерживал его частично). В средах, где требуется поддержка IE, добавьте полифилл, разбирая содержимое template при инициализации. В современных проектах используйте template без полифилла.

Почему для многократной отрисовки предпочтительнее использовать template.content.cloneNode(true), а не innerHTML?

Элемент template содержит инертные, предварительно разобранные фрагменты HTML-кода. Клонирование template.content создаёт независимые экземпляры для ручной привязки данных. В сочетании с присваиванием textContent (без XSS) template позволяют создавать отрисовку списков, похожую на фреймворк, условный интерфейс и повторно используемые шаблоны HTML-кода, используя только стандартные API браузера.