5.1 Tag <template>
Der Tag <template> in HTML gibt Entwicklern die Möglichkeit, HTML-Code-Snippets zu definieren,
die beim Laden der Seite nicht angezeigt werden, aber später über JavaScript verwendet werden können. Das ist besonders nützlich für
die dynamische Erstellung und Einfügung von Inhalten wie Listenelementen, Produktkarten und anderen sich wiederholenden Strukturen.
Das <template>-Element wird verwendet, um HTML-Code zu speichern, der nicht sofort auf der Seite angezeigt wird.
Der Inhalt innerhalb von <template> wird beim Laden der Seite nicht vom Browser gerendert, ist aber über das DOM
(Document Object Model) zugänglich und kann mit JavaScript geklont und in das Dokument eingefügt werden.
Syntax:
<template>
<!-- Vorlageninhalt -->
</template>
Hauptmerkmale des <template>-Tags
- Inhaltsausblendung: Der Inhalt des
<template>-Tags wird beim Laden der Seite nicht angezeigt. - Verwendung von JavaScript: Der Inhalt des
<template>-Tags kann über JavaScript geklont und in das DOM eingefügt werden. - Verzögertes Laden: Ermöglicht das Laden und Anzeigen von Inhalten nur nach Bedarf, was die Leistung der Seite verbessern kann.
Beispiel für die Nutzung des <template>-Tags
In diesem Beispiel wird beim Klicken auf die Schaltfläche "Add Item" ein neues Listenelement erstellt, das der <ul>-Liste hinzugefügt wird.
Die Vorlage für das neue Listenelement wird innerhalb des <template>-Tags definiert.
<button id="addButton">Add Item</button>
<ul id="itemList"></ul>
<template id="itemTemplate">
<li class="item">This is a new item</li>
</template>
// Holen Sie sich Verweise auf die DOM-Elemente, die wir verwenden werden
const addButton = document.getElementById('addButton'); // Schaltfläche "Hinzufügen"
const itemList = document.getElementById('itemList'); // Liste, in die wir Elemente hinzufügen werden
const itemTemplate = document.getElementById('itemTemplate'); // Listenelement-Vorlage
// Fügen Sie einen Ereignishandler zur Schaltfläche "Hinzufügen" hinzu
addButton.addEventListener('click', () => {
// Klonen Sie den Inhalt der Listenelementvorlage
const newItem = itemTemplate.content.cloneNode(true); // true bedeutet tiefes Klonen (einschließlich aller Kindelemente)
// Fügen Sie das neue Element zur Liste hinzu
itemList.appendChild(newItem);
});
5.2 Beispiel: Erzeugung von Produktkarten
Mit <template> und JavaScript kann man zum Beispiel eine Liste von Elementen — Produktkarten — generieren.
Beispiel für die Nutzung des <template>-Tags:
<h1>Produktliste</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>
// Warten Sie, bis das DOM vollständig geladen ist, bevor Sie das Skript ausführen
document.addEventListener('DOMContentLoaded', () => {
// Array mit Produktdaten
const products = [
{ title: 'Produkt 1', description: 'Beschreibung von Produkt 1', price: '100 €' },
{ title: 'Produkt 2', description: 'Beschreibung von Produkt 2', price: '200 €' },
{ title: 'Produkt 3', description: 'Beschreibung von Produkt 3', price: '300 €' },
];
// Holen Sie sich Verweise auf die DOM-Elemente
const productList = document.getElementById('productList'); // Container für die Produktliste
const template = document.getElementById('productTemplate').content; // Produktvorlage
// Durchlaufen Sie das Produktarray und erstellen Sie für jedes ein Element in der Liste
products.forEach(product => {
// Klonen Sie die Produktvorlage
const clone = document.importNode(template, true); // true - tiefes Klonen
// Füllen Sie die Daten in der geklonten Vorlage aus
clone.querySelector('.title').textContent = product.title;
clone.querySelector('.description').textContent = product.description;
clone.querySelector('.price').textContent = product.price;
// Fügen Sie die ausgefüllte Vorlage zur Produktliste hinzu
productList.appendChild(clone);
});
});
Erklärung
- Tag
<template>: enthält HTML-Code, der beim Laden der Seite nicht angezeigt wird. - Methode
document.importNode(template, true): klont den Inhalt der Vorlage. - Methoden
querySelectorundtextContent: werden verwendet, um den Inhalt der geklonten Vorlage zu ändern, bevor sie in das Dokument eingefügt wird.
5.3 Vorteile des <template>-Tags
Leistungsverbesserung
Die Verwendung von Vorlagen ermöglicht das Vorladen von HTML-Code, der später verwendet wird. Dies kann die Leistung der Seite verbessern, da der Inhalt der Vorlagen nicht gerendert wird und die anfängliche Ladezeit der Seite nicht beeinträchtigt.
Vereinfachung dynamischer Inhalte
Vorlagen vereinfachen die Erstellung dynamischer Inhalte. Anstatt HTML-Code programmatisch mit JavaScript zu erstellen, kann man einfach vorbereitete Vorlagen klonen und anpassen.
Bequemlichkeit und Lesbarkeit
Vorlagen machen den Code besser lesbar und strukturierter, da HTML-Code für wiederkehrende Elemente separat gespeichert werden kann, anstatt ihn in JavaScript einzufügen.
Beispiel mit bedingter Anzeige von Inhalten:
<h1>Operationsergebnisse</h1>
<div id="messageContainer"></div>
<template id="messageTemplate">
<div class="message">
<p class="content"></p>
</div>
</template>
document.addEventListener('DOMContentLoaded', () => {
// Holen Sie sich Verweise auf die DOM-Elemente
const messageContainer = document.getElementById('messageContainer'); // Container für Nachrichten
const template = document.getElementById('messageTemplate').content; // Nachrichten-Vorlage
// Funktion zum Anzeigen einer Nachricht
function showMessage(type, text) {
// Klonen der Nachrichten-Vorlage
const clone = document.importNode(template, true); // true - tiefes Klonen
// Holen Sie sich einen Verweis auf das Nachrichtenelement innerhalb des Klons
const messageDiv = clone.querySelector('.message');
// Fügen Sie eine Klasse hinzu, die dem Nachrichtentyp entspricht (success oder error)
messageDiv.classList.add(type);
// Legen Sie den Nachrichtentext fest
messageDiv.querySelector('.content').textContent = text;
// Fügen Sie die Nachricht zum Container hinzu
messageContainer.appendChild(clone);
}
// Rufen Sie die Funktion auf, um Nachrichten anzuzeigen
showMessage('success', 'Operation erfolgreich abgeschlossen!');
showMessage('error', 'Fehler bei der Durchführung der Operation.');
});
Erklärung:
- Funktion
showMessage(): nimmt den Nachrichtentyp (Erfolg oder Fehler) und den Nachrichtentext, klont die Vorlage und fügt sie dem Nachrichtencontainer hinzu. - Klassen
.successund.error: werden je nach Nachrichtentyp auf die geklonte Vorlage angewendet, um sie zu stylen.
GO TO FULL VERSION