Создание шаблонов <template>
📅
Что такое HTML Templates?
Элемент <template> позволяет создавать фрагменты HTML-разметки, которые не отображаются на странице до момента их клонирования.
Базовый синтаксис
<template id="user-template">
<div class="user-card">
<h3>Имя пользователя</h3>
<p>Описание профиля</p>
</div>
</template>
Особенности элемента
- Не отображается в DOM до активации
- Содержимое инертное: скрипты не выполняются, изображения не загружаются
- Может находиться anywhere в
<body>
Пример использования
// Клонирование и вставка шаблона
const template = document.getElementById('user-template');
const clone = template.content.cloneNode(true); // true = deep clone
document.body.appendChild(clone);
Проверка поддержки
if ('content' in document.createElement('template')) {
// Браузер поддерживает templates
} else {
// Полифилл или fallback
}