Тег <template>: заготовка DOM без немедленного отображения

Назначение

Элемент template хранит фрагмент разметки для последующего использования. Его содержимое не выводится как обычная часть страницы до добавления в документ.

Как это работает

Свойство content предоставляет DocumentFragment. Клонирование через cloneNode(true) создаёт отдельную копию дерева; после заполнения её можно вставить в контейнер. Для пользовательского текста применяйте textContent, чтобы он не интерпретировался как HTML.

Пример

<template id="item-template"><li><strong></strong></li></template>
<ul id="items"></ul>
<script>
const fragment=document.querySelector("#item-template").content.cloneNode(true);
fragment.querySelector("strong").textContent="Новая заметка";
document.querySelector("#items").append(fragment);
</script>

Что должно получиться

В самостоятельном файле при включённом JavaScript список получает один пункт «Новая заметка». Исходный template остаётся доступен для следующего клонирования. Песочница справочника не выполняет этот скрипт.

Граница применения и частая ошибка

После append узлы DocumentFragment перемещаются в документ, и сам фрагмент становится пустым. Для второго пункта нужна новая копия. Не размножайте одинаковые id внутри шаблона: это нарушит уникальность идентификаторов.

Самостоятельная проверка

Создайте три пункта из одной заготовки, каждый раз клонируя content. Передайте строку с угловыми скобками через textContent и убедитесь, что она отображается буквально, без создания дополнительных элементов.

Связанные материалы

• Каркас документа
• Порядок загрузки скриптов
• Постепенное улучшение