Клонирование и использование шаблонов
📅
Метод content.cloneNode()
Основной способ активации шаблонов — клонирование содержимого:
const template = document.getElementById('my-template');
const clone = template.content.cloneNode(true); // true = глубокое клонирование
document.body.appendChild(clone);
Параметр deep
cloneNode(true)— полное копирование со всеми потомкамиcloneNode(false)— копирование только самого элемента
Примеры использования
Простое клонирование
<template id="button-template">
<button class="btn">Кнопка</button>
</template>
<script>
const template = document.getElementById('button-template');
const clone = template.content.cloneNode(true);
document.getElementById('container').appendChild(clone);
</script>
Многократное использование
// Создание нескольких копий
for (let i = 0; i < 5; i++) {
const clone = template.content.cloneNode(true);
document.body.appendChild(clone);
}
Особенности активации
При клонировании шаблона:
- ✅ Скрипты начинают выполняться
- ✅ Изображения загружаются
- ✅ Стили применяются
- ✅ Элементы становятся частью DOM
Производительность
// Лучше: клонирование из существующего template
const clone = template.content.cloneNode(true);
// Хуже: создание через innerHTML (медленнее)
element.innerHTML = '<div>Новый элемент</div>';