Das Element <template> verwendet man für die Aufbewahrung der Vorlagen des HTML-Kodes, die man klonen und ins Dokument mithilfe von Skripten platzieren kann. Es wird gewöhnlich für die Elemente mit einer wiederholenden Struktur wie Listen, Tabellen usw. verwendet.
Das Tag <template> unterscheidet sich von anderen Tags dadurch, dass sein Inhalt besonders bearbeitet wird. Die Fragmente des Kodes werden auf der Seite des Kunden bewahrt und werden während des Hochladens der Seite nicht angezeigt. Der Inhalt wird nur dann aktiviert (das Video wird gespielt, die Skripte werden durchgeführt usw.), wenn er im Dokument platziert wird.
Der Browser bearbeitet den Inhalt des Tages, um die Validität des Codes zu bestätigen.
Das Tag <template> kann tatsächlich an einer beliebigen Stelle des HTML-Dokumentes platziert werden sein: <head>, <body> oder <frameset> und kann jede Art von Inhalt, der in diesen Elementen erlaubt ist, enthalten.
Das Tag <template> ist ein neues Element in HTML 5.Syntax
Das Tag <template> wird gepaart verwendet, sein Inhalt wird zwischen den Start- (<template>) und Endtags (</template>) platziert.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
</head>
<body>
<template id="myTemplate">
<p>Der Inhalt der Vorlage.</p>
</template>
<div id="normalContent">
<p>Erster Absatz</p>
</div>
<!-- Die Funktion JavaScript: Kloniert Template und fügt einfacher Inhalt hinzu -->
<button onclick="useTemplate();">Inhalt anzeigen</button>
<script>
function useTemplate() {
var myTemplate = document.getElementById('myTemplate'),
normalContent = document.getElementById('normalContent'),
clonedTemplate = myTemplate.content.cloneNode(true);
normalContent.appendChild(clonedTemplate);
}
</script>
</body>
</html>Ergebnis
Das Tag <template> unterstützt auch Globale Attribute.
Browser-Support
|
|
|
|
|---|---|---|---|
| 26+ | 22+ | 8+ | 15+ |
Übe dein Wissen
