Справочник HTML

Тег <template>: заготовка для JavaScript

Содержимое <template> браузер разбирает, но не показывает и не запускает. JavaScript может клонировать заготовку и безопасно добавлять её в документ столько раз, сколько нужно.

Рабочий пример

<template id="card-template">
  <article class="card">
    <h2></h2>
    <p></p>
  </article>
</template>
<div class="cards"></div>

Разметка хранится в свойстве content как DocumentFragment. Вызов content.cloneNode(true) создаёт глубокую копию, после чего можно заполнить текст и добавить карточку в контейнер.

Когда применять

template удобен для небольших компонентов без фреймворка: уведомлений, строк таблицы и карточек. Данные вставляй через textContent, если не требуется доверенный HTML.

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

Частые ошибки

• Искать элементы шаблона прямо в document
• Забывать true при глубоком клонировании
• Вставлять пользовательские данные через innerHTML