5.1 Tag <template>
Tag <template> w HTML daje programistom możliwość definiowania fragmentów kodu HTML, które nie będą wyświetlane podczas ładowania strony, ale mogą być użyte później przez JavaScript. Jest to szczególnie przydatne do dynamicznego tworzenia i wstawiania treści, takich jak elementy listy, karty produktów i inne powtarzające się struktury.
Element <template> jest używany do przechowywania kodu HTML, który nie zostanie od razu wyświetlony na stronie. Zawartość wewnątrz <template> nie jest renderowana przez przeglądarkę podczas ładowania strony, ale jest dostępna przez DOM (Document Object Model) i może być klonowana i wstawiana do dokumentu za pomocą JavaScript.
Składnia:
<template>
<!-- Zawartość szablonu -->
</template>
Główne cechy tagu <template>
- Ukrywanie zawartości: zawartość tagu
<template>nie jest wyświetlana na stronie przy jej ładowaniu. - Użycie JavaScript: zawartość tagu
<template>można klonować i wstawiać do DOM za pomocą JavaScript. - Odroczone ładowanie: pozwala ładować i wyświetlać zawartość tylko w miarę potrzeby, co może poprawić wydajność strony.
Przykład użycia tagu <template>
W tym przykładzie po naciśnięciu przycisku "Add Item" tworzony jest nowy element listy, który dodawany jest do listy <ul>. Szablon dla nowego elementu listy określony jest wewnątrz tagu <template>.
<button id="addButton">Add Item</button>
<ul id="itemList"></ul>
<template id="itemTemplate">
<li class="item">This is a new item</li>
</template>
// Pobieramy odwołania do elementów w DOM, których będziemy używać
const addButton = document.getElementById('addButton'); // Przycisk "Dodaj"
const itemList = document.getElementById('itemList'); // Lista, do której będziemy dodawać elementy
const itemTemplate = document.getElementById('itemTemplate'); // Szablon elementu listy
// Dodajemy obsługę zdarzenia na przycisk "Dodaj"
addButton.addEventListener('click', () => {
// Klonujemy zawartość szablonu elementu listy
const newItem = itemTemplate.content.cloneNode(true); // true oznacza głębokie klonowanie (w tym wszystkie elementy potomne)
// Dodajemy nowy element do listy
itemList.appendChild(newItem);
});
5.2 Przykład: generacja kart produktu
Za pomocą <template> i JavaScript można na przykład generować listę elementów — kart produktów.
Przykład użycia tagu <template>:
<h1>Lista produktów</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>
// Czekamy na pełne załadowanie DOM przed wykonaniem skryptu
document.addEventListener('DOMContentLoaded', () => {
// Tablica danych o produktach
const products = [
{ title: 'Produkt 1', description: 'Opis produktu 1', price: '100 $' },
{ title: 'Produkt 2', description: 'Opis produktu 2', price: '200 $' },
{ title: 'Produkt 3', description: 'Opis produktu 3', price: '300 $' },
];
// Pobieramy odwołania do elementów w DOM
const productList = document.getElementById('productList'); // Kontener dla listy produktów
const template = document.getElementById('productTemplate').content; // Szablon elementu produktu
// Przechodzimy przez tablicę produktów i dla każdego tworzymy element w liście
products.forEach(product => {
// Klonujemy szablon produktu
const clone = document.importNode(template, true); // true - głębokie klonowanie
// Wypełniamy dane w sklonowanym szablonie
clone.querySelector('.title').textContent = product.title;
clone.querySelector('.description').textContent = product.description;
clone.querySelector('.price').textContent = product.price;
// Dodajemy wypełniony szablon do listy produktów
productList.appendChild(clone);
});
});
Wyjaśnienie
- Tag
<template>: zawiera kod HTML, który nie jest wyświetlany na stronie podczas ładowania. - Metoda
document.importNode(template, true): klonuje zawartość szablonu. - Metody
querySelectoritextContent: są używane do zmiany zawartości sklonowanego szablonu przed jego wstawieniem do dokumentu.
5.3 Zalety tagu <template>
Poprawa wydajności
Użycie szablonów pozwala na wstępne załadowanie kodu HTML, który będzie używany później. Może to poprawić wydajność strony, ponieważ zawartość szablonów nie jest renderowana i nie wpływa na początkowe ładowanie strony.
Ułatwienie dynamicznej zawartości
Szablony upraszczają tworzenie dynamicznej zawartości. Zamiast programowo tworzyć kod HTML za pomocą JavaScript, można po prostu klonować i modyfikować wcześniej przygotowane szablony.
Wygoda i czytelność
Szablony sprawiają, że kod jest bardziej czytelny i uporządkowany, ponieważ kod HTML dla powtarzających się elementów można przechowywać osobno, zamiast umieszczać go w JavaScript.
Przykład z warunkowym wyświetlaniem zawartości:
<h1>Wyniki operacji</h1>
<div id="messageContainer"></div>
<template id="messageTemplate">
<div class="message">
<p class="content"></p>
</div>
</template>
document.addEventListener('DOMContentLoaded', () => {
// Pobieramy odwołania do elementów w DOM
const messageContainer = document.getElementById('messageContainer'); // Kontener dla wiadomości
const template = document.getElementById('messageTemplate').content; // Szablon wiadomości
// Funkcja do wyświetlania wiadomości
function showMessage(type, text) {
// Klonujemy szablon wiadomości
const clone = document.importNode(template, true); // true - głębokie klonowanie
// Pobieramy odwołanie do elementu wiadomości wewnątrz klonu
const messageDiv = clone.querySelector('.message');
// Dodajemy klasę, odpowiadającą typowi wiadomości (success lub error)
messageDiv.classList.add(type);
// Ustawiamy tekst wiadomości
messageDiv.querySelector('.content').textContent = text;
// Dodajemy wiadomość do kontenera
messageContainer.appendChild(clone);
}
// Wywołujemy funkcję do wyświetlania wiadomości
showMessage('success', 'Operacja zakończona sukcesem!');
showMessage('error', 'Wystąpił błąd podczas wykonywania operacji.');
});
Wyjaśnienie:
- Funkcja
showMessage(): przyjmuje typ wiadomości (sukces lub błąd) i tekst wiadomości, klonuje szablon i dodaje go do kontenera wiadomości. - Klasy
.successi.error: są stosowane do sklonowanego szablonu w zależności od typu wiadomości, w celu stylizacji.
GO TO FULL VERSION