HTML <template> Tag
Das <template>-Tag speichert Code-Fragmente, die geklont und im HTML-Dokument wiederverwendet werden können. Beispiele ansehen.
Das <template>-Tag enthält HTML-Markup, das Sie wiederverwenden möchten, aber beim Laden der Seite nicht gerendert werden soll. Der Browser analysiert das Markup, um sicherzustellen, dass es gültig ist, und hält es dann als inaktiven Entwurf bereit. Sie klonen diesen Entwurf mit JavaScript, wann immer Sie eine Kopie auf der Live-Seite benötigen — ein gängiges Muster zum Erstellen wiederholter Listenelemente, Tabellenzeilen oder Karten.
Diese Seite behandelt, was Template-Inhalte inaktiv macht, wie man sie mit JavaScript aktiviert (content, cloneNode, appendChild) und eine praktische Schleife, die viele Elemente aus einem einzigen Template erzeugt.
Das <template>-Tag ist ein neues Element in HTML5. Es kann überall innerhalb von <head> oder <body> platziert werden und darf beliebige Inhalte enthalten, die diese Elemente erlauben.
Warum Template-Inhalt inaktiv ist
Alles innerhalb eines <template> wird wie normales HTML geparst, aber der Browser behandelt es als inaktiv, bis Sie es aktivieren. Das bedeutet:
- Es wird nicht gerendert — nichts innerhalb des Templates erscheint auf der Seite.
<script>-Tags darin werden nicht ausgeführt.<style>-Tags darin werden nicht angewendet.- Externe Ressourcen werden nicht geladen —
<img>-,<video>- und<audio>-Quellen werden nicht abgerufen, sodass ein Template mit 100 Bildern keine Netzwerkanfragen verursacht, bis Sie es verwenden. - Seine Knoten sind nicht Teil des Haupt-Dokumentbaums. Der Aufruf von
document.getElementById()oderquerySelector()auf der Seite wird Elemente, die sich innerhalb eines Templates befinden, nicht finden.
Diese Inaktivität ist der eigentliche Zweck: Sie können einen Markup-Block mit der Seite ausliefern, der kostengünstig und nebenwirkungsfrei bleibt, bis Sie ihn tatsächlich benötigen.
Syntax
Das <template>-Tag wird paarweise verwendet. Der Inhalt wird zwischen dem öffnenden (<template>) und dem schließenden (</template>) Tag geschrieben.
Beispiel des HTML <template>-Tags:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is a heading.</h1>
<p>
<q>If you tell the truth, you don't have to remember anything.</q>
― Mark Twain
</p>
<template>
<h2>This is a second heading.</h2>
<p>
“I'm selfish, impatient and a little insecure. I make mistakes, I am out of control and at times hard to handle. But if you can't handle me at my worst, then you sure as hell don't deserve me at my best.”
― Marilyn Monroe
</p>
</template>
</body>
</html>Wenn Sie das obige Beispiel öffnen, sind die zweite Überschrift und das Marilyn-Monroe-Zitat nirgendwo auf der Seite — sie befinden sich innerhalb des <template>, das beim Laden unsichtbar und inaktiv ist. Nichts wird gerendert, bis JavaScript den Inhalt in das Live-Dokument klont.
Ein Template mit JavaScript aktivieren
Um Template-Inhalt zu verwenden, lesen Sie ihn über die content-Eigenschaft des Elements, klonen ihn und fügen den Klon in die Seite ein. Hier ist das kanonische Muster, das unten erläutert wird:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<template id="myTemplate">
<p>Template content</p>
</template>
<div id="normalContent">
<p>First paragraph</p>
</div>
<!-- JavaScript function clones the template and adds it to the document. -->
<button onclick="useTemplate();">Show content</button>
<script>
function useTemplate() {
const myTemplate = document.getElementById('myTemplate');
const normalContent = document.getElementById('normalContent');
const clonedTemplate = myTemplate.content.cloneNode(true);
normalContent.appendChild(clonedTemplate);
}
</script>
</body>
</html>Wenn die Schaltfläche geklickt wird, wird die Funktion useTemplate() ausgeführt. Hier ist, was jede Zeile macht:
myTemplate.contentgibt dasDocumentFragmentdes Templates zurück — einen leichtgewichtigen, dokumentexternen Container, der die untergeordneten Knoten des Templates enthält. Sie fügen dieses Fragment niemals direkt ein, da dies das ursprüngliche Template leeren würde; stattdessen klonen Sie es..cloneNode(true)erstellt einen tiefen Klon des Fragments. Das Argumenttruebedeutet „diesen Knoten und alle seine Nachkommen klonen". Mitfalsewürden Sie nur das leere Fragment kopieren und das<p>darin verlieren — für Templates übergeben Sie daher fast immertrue.normalContent.appendChild(clonedTemplate)fügt die geklonten Knoten in den Live-DOM ein, nach dem vorhandenen ersten Absatz. Da es sich um eine Kopie handelt, bleibt das Template unberührt und kann beliebig oft wiederverwendet werden.
Weitere Informationen zu diesen Methoden finden Sie unter JavaScript HTML DOM.
Anwendungsfall: Wiederholte Inhalte in einer Schleife erstellen
Die eigentliche Stärke von <template> zeigt sich, wenn Sie viele ähnliche Elemente benötigen. Anstatt jede Zeile von Hand zu schreiben oder Markup durch String-Verkettung zu erstellen, behalten Sie einen Entwurf und klonen ihn für jedes Datenelement:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<ul id="fruitList"></ul>
<template id="itemTemplate">
<li class="fruit"></li>
</template>
<script>
const fruits = ['Apple', 'Banana', 'Cherry'];
const list = document.getElementById('fruitList');
const template = document.getElementById('itemTemplate');
fruits.forEach(function (fruit) {
// Clone the template for each fruit.
const clone = template.content.cloneNode(true);
// Fill in the clone before inserting it.
clone.querySelector('.fruit').textContent = fruit;
list.appendChild(clone);
});
</script>
</body>
</html>Dies erzeugt drei <li>-Elemente, eines pro Frucht. Derselbe Ansatz lässt sich auf Tabellenzeilen, Produktkarten oder beliebige datengesteuerte Listen übertragen — das Markup wird einmal definiert, in einer Schleife geklont und die dynamischen Teile werden vor dem Einfügen ausgefüllt.
Das <template>-Tag unterstützt die globalen Attribute.