HTML-тег <шаблон>

HTML-тег <template> используется для определения фрагмента HTML-контента, который не отображается сразу при загрузке страницы. Вместо этого его можно клонировать и динамически вставить в DOM с помощью JavaScript. Это делает тег <template> идеальным для повторно используемых компонентов, плейсхолдеров контента и динамического рендеринга контента.

Содержимое элемента <template> по умолчанию неактивно, то есть оно не отображается и не выполняется до тех пор, пока им явно не манипулируют с помощью JavaScript.

Базовый синтаксис тега HTML <template>

Базовая структура тега <template> следующая:

<template>
    HTML content goes here.
</template>

Содержимое тега <template> сохраняется, но не отображается, пока не будет активировано с помощью JavaScript.

Пример использования тега <template>

Вот простой пример динамической визуализации контента с использованием тега <template> :

<!DOCTYPE html>
<html>
    <body>
        <h2>Dynamic Content with Template</h2>
        <button onclick="addItem()">Add Item</button>
        <ul id="item-list"></ul>

        <template id="item-template">
            <li>This is a template item.</li>
        </template>

        <script>
            function addItem() {
                const template = document.getElementById('item-template');
                const clone = template.content.cloneNode(true);
                document.getElementById('item-list').appendChild(clone);
            }
        </script>
    </body>
</html>

Пояснение: Нажатие кнопки «Добавить элемент» клонирует содержимое <template> и динамически добавляет его в список.

Атрибуты HTML-тега <template>

Глобальные атрибуты: поддерживает все глобальные атрибуты, такие как id , class и style .
Атрибуты событий: могут включать атрибуты событий, такие как onclick , но они неактивны, пока шаблон не будет отображен в DOM.

Пример с шаблонами форм

Шаблоны полезны для динамического создания элементов формы:

<!DOCTYPE html>
<html>
    <body>
        <h2>Dynamic Form Template</h2>
        <button onclick="addField()">Add Field</button>
        <form id="dynamic-form"></form>

        <template id="field-template">
            <div>
                <label>Name:</label>
                <input type="text" name="name" required>
            </div>
        </template>

        <script>
            function addField() {
                const template = document.getElementById('field-template');
                const clone = template.content.cloneNode(true);
                document.getElementById('dynamic-form').appendChild(clone);
            }
        </script>
    </body>
</html>

Пояснение: Нажатие кнопки «Добавить поле» динамически добавляет новые поля ввода в форму, используя содержимое <template> .

Стилизация содержимого <template>

Вы можете стилизовать содержимое шаблона после его отображения в DOM. Вот пример:

<!DOCTYPE html>
<html>
    <head>
        <style>
            .template-item {
                background-color: #f0f0f0;
                padding: 10px;
                margin: 5px 0;
                border: 1px solid #ddd;
            }
        </style>
    </head>
    <body>
        <h2>Styled Template Example</h2>
        <button onclick="addStyledItem()">Add Styled Item</button>
        <ul id="styled-list"></ul>

        <template id="styled-template">
            <li class="template-item">This is a styled template item.</li>
        </template>

        <script>
            function addStyledItem() {
                const template = document.getElementById('styled-template');
                const clone = template.content.cloneNode(true);
                document.getElementById('styled-list').appendChild(clone);
            }
        </script>
    </body>
</html>

Результат: каждый динамически добавленный элемент оформляется светлым фоном, отступами и рамкой.

Практическое применение тега <template>

Повторно используемые компоненты: создавайте шаблоны для повторяющегося контента, например списков, карточек или виджетов.
Динамические формы: добавляйте поля формы динамически на основе взаимодействия с пользователем.
Контент, управляемый данными: динамическая визуализация HTML-структур путем извлечения и обработки данных с помощью JavaScript.
Улучшенная производительность: используйте шаблоны для предварительной загрузки скрытого или условного контента для последующего рендеринга.