5.1 Тег <template>
Тег <template> в HTML надає розробникам можливість визначати фрагменти HTML-коду, які не будуть відображатись при завантаженні сторінки, але можуть бути використані пізніше через JavaScript. Це особливо корисно для динамічного створення і вставки контенту, таких як елементи списку, картки продуктів і інші повторювані структури.
Елемент <template> використовується для зберігання HTML-коду, який не буде відображатись на сторінці одразу. Вміст всередині <template> не рендериться браузером при завантаженні сторінки, але доступний через DOM (Document Object Model) і може бути клонований та вставлений у документ за допомогою JavaScript.
Синтаксис:
<template>
<!-- Вміст шаблону -->
</template>
Основні особливості тега <template>
- Приховання вмісту: вміст тега
<template>не відображається на сторінці при її завантаженні. - Використання JavaScript: вміст тега
<template>можна клонувати і вставляти в DOM через JavaScript. - Відкладене завантаження: дозволяє завантажувати і відображати вміст лише за необхідністю, що може покращити продуктивність сторінки.
Приклад використання тега <template>
У цьому прикладі при натисканні на кнопку "Add Item" створюється новий елемент списку, який додається до списку <ul>. Шаблон для нового елемента списку визначається всередині тега <template>.
<button id="addButton">Add Item</button>
<ul id="itemList"></ul>
<template id="itemTemplate">
<li class="item">Це новий елемент</li>
</template>
// Отримуємо посилання на елементи в DOM, які будемо використовувати
const addButton = document.getElementById('addButton'); // Кнопка "Додати"
const itemList = document.getElementById('itemList'); // Список, куди будемо додавати елементи
const itemTemplate = document.getElementById('itemTemplate'); // Шаблон елемента списку
// Додаємо обробник події на кнопку "Додати"
addButton.addEventListener('click', () => {
// Клонуємо вміст шаблону елемента списку
const newItem = itemTemplate.content.cloneNode(true); // true означає глибоке клонування (включаючи всі дочірні елементи)
// Додаємо новий елемент до списку
itemList.appendChild(newItem);
});
5.2 Приклад: генерація карток товару
За допомогою <template> і JavaScript можна, наприклад, генерувати список елементів — карток товару.
Приклад використання тега <template>:
<h1>Список товарів</h1>
<div id="productList"></div>
<template id="productTemplate">
<div class="item">
<h2 class="title"></h2>
<p class="description"></p>
<span class="price"></span>
</div>
</template>
// Чекаємо повного завантаження DOM перед виконанням скрипту
document.addEventListener('DOMContentLoaded', () => {
// Масив даних про товари
const products = [
{ title: 'Товар 1', description: 'Опис товару 1', price: '100 дол.' },
{ title: 'Товар 2', description: 'Опис товару 2', price: '200 дол.' },
{ title: 'Товар 3', description: 'Опис товару 3', price: '300 дол.' },
];
// Отримуємо посилання на елементи в DOM
const productList = document.getElementById('productList'); // Контейнер для списку товарів
const template = document.getElementById('productTemplate').content; // Шаблон елемента товару
// Перебираємо масив товарів і для кожного створюємо елемент у списку
products.forEach(product => {
// Клонуємо шаблон товару
const clone = document.importNode(template, true); // true - глибоке клонування
// Заповнюємо дані у клонованому шаблоні
clone.querySelector('.title').textContent = product.title;
clone.querySelector('.description').textContent = product.description;
clone.querySelector('.price').textContent = product.price;
// Додаємо заповнений шаблон до списку товарів
productList.appendChild(clone);
});
});
Пояснення
- Тег
<template>: має HTML-код, який не відображається на сторінці при завантаженні. - Метод
document.importNode(template, true): клонує вміст шаблону. - Методи
querySelectorіtextContent: використовуються для зміни вмісту клонованого шаблону перед вставкою його в документ.
5.3 Переваги тега <template>
Покращення продуктивності
Використання шаблонів дозволяє попередньо завантажувати HTML-код, який буде використовуватися пізніше. Це може покращити продуктивність сторінки, оскільки вміст шаблонів не рендериться і не впливає на початкове завантаження сторінки.
Спрощення динамічного контенту
Шаблони спрощують створення динамічного контенту. Замість того, щоб створювати HTML-код програмно за допомогою JavaScript, можна просто клонувати і модифікувати заздалегідь підготовлені шаблони.
Зручність і читабельність
Шаблони роблять код більш читабельним і структурованим, оскільки HTML-код для повторюваних елементів можна зберігати окремо, а не вставляти його в JavaScript.
Приклад з умовним відображенням контенту:
<h1>Результати операції</h1>
<div id="messageContainer"></div>
<template id="messageTemplate">
<div class="message">
<p class="content"></p>
</div>
</template>
document.addEventListener('DOMContentLoaded', () => {
// Отримуємо посилання на елементи в DOM
const messageContainer = document.getElementById('messageContainer'); // Контейнер для повідомлень
const template = document.getElementById('messageTemplate').content; // Шаблон повідомлення
// Функція для відображення повідомлення
function showMessage(type, text) {
// Клонуємо шаблон повідомлення
const clone = document.importNode(template, true); // true - глибоке клонування
// Отримуємо посилання на елемент повідомлення всередині клону
const messageDiv = clone.querySelector('.message');
// Додаємо клас, що відповідає типу повідомлення (success або error)
messageDiv.classList.add(type);
// Встановлюємо текст повідомлення
messageDiv.querySelector('.content').textContent = text;
// Додаємо повідомлення до контейнера
messageContainer.appendChild(clone);
}
// Викликаємо функцію для відображення повідомлень
showMessage('success', 'Операцію успішно виконано!');
showMessage('error', 'Сталася помилка під час виконання операції.');
});
Пояснення:
- Функція
showMessage(): приймає тип повідомлення (успіх або помилка) і текст повідомлення, клонує шаблон і додає його до контейнера повідомлень. - Класи
.successі.error: застосовуються до клонованого шаблону залежно від типу повідомлення для стилізації.
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ