15. Jaki jest cel użycia znacznika <template> w HTML i jak się go używa?

Jaki jest cel użycia znacznika `<template>` w HTML i jak się go używa?

Znacznik <template> w HTML służy do przechowywania treści po stronie klienta, która nie powinna być renderowana podczas ładowania strony. Definiuje szablon, który może być zainicjowany przez JavaScript, aby stworzyć w pełni funkcjonalną strukturę DOM. Jest to szczególnie przydatne, gdy potrzebujesz wielokrotnie używać fragmentów treści, które chcesz dynamicznie wstawiać do dokumentu.

Kluczowe cechy

Brak renderowania: Zawartość wewnątrz znacznika <template> nie jest domyślnie wyświetlana w przeglądarce. Jest ona bezwładna i nie wpływa na układ strony ani nie jest widoczna dla użytkowników, dopóki nie zostanie aktywowana przez JavaScript.
Wielokrotne użycie: Pozwala na tworzenie wielokrotnie używanych fragmentów HTML, które mogą być klonowane i wstawiane do DOM wielokrotnie.

Podstawowe użycie

Oto prosty przykład użycia znacznika <template>:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Przykład Template</title>
</head>
<body>
    <button id="loadContent">Załaduj Treść</button>
    
    <template id="myTemplate">
        <div class="greeting">
            <h1>Witaj, Świecie!</h1>
            <p>To jest zawartość szablonu.</p>
        </div>
    </template>

    <div id="content"></div>

    <script>
        document.getElementById('loadContent').addEventListener('click', function() {
            const template = document.getElementById('myTemplate');
            const clone = template.content.cloneNode(true);
            document.getElementById('content').appendChild(clone);
        });
    </script>
</body>
</html>

W tym przykładzie:

Znacznik <template> zawiera prostą wiadomość powitalną.
JavaScript jest używany do klonowania zawartości szablonu i dodania go do div #content po kliknięciu przycisku.

Korzyści

Wydajność: Poprzez opóźnienie renderowania części strony do momentu, gdy są potrzebne, można poprawić wydajność początkowego ładowania.
Organizacja: Utrzymuje czystość HTML poprzez oddzielenie komponentów wielokrotnego użytku od reszty struktury strony.

Wniosek

Znacznik <template> to potężne narzędzie dla deweloperów, którzy muszą efektywnie zarządzać dynamiczną treścią, oferując sposób na definiowanie i ponowne używanie treści bez zagracania DOM do momentu, gdy jest to konieczne.