📈 Шаблоны для эффективной работы с DOM с помощью <template>
В современных веб-приложениях важны производительность и удобство работы с DOM. Элемент <template> позволяет создавать невидимые шаблоны, которые можно многократно использовать для динамической генерации интерфейса.
📌 Что это такое?
Элемент <template> — это контейнер для HTML-разметки, которая не отображается на странице сразу, а существует как часть DOM. Она активируется только при явном вызове через JavaScript. Это полезно для создания однотипных элементов, таких как карточки, списки, модальные окна.
📌 Как с этим работать?
📖Определение шаблона: внутри <template> можно хранить HTML-код, включая стили и скрипты.
📖Клонирование: с помощью метода .content.cloneNode() шаблон копируется и добавляется в DOM.
📖Инкапсуляция логики: шаблоны можно использовать с Web Components, что делает код более модульным и переиспользуемым.
📌 Где применяется?
📖Компоненты пользовательского интерфейса: карточки товаров, списки задач.
📖Повышение производительности: шаблоны рендерятся быстрее, так как не требуют повторной работы браузера с DOM.
📖Работа с Web Components: для создания модульных элементов интерфейса.
Пример:
<template id="card-template">
<div class="card">
<h3></h3>
</div>
</template>
<script>
const template = document.querySelector('#card-template').content;
const clone = template.cloneNode(true);
clone.querySelector('h3').textContent = "Заголовок";
document.body.appendChild(clone);
</script>
👍 Платформа