HTML- <template> -Tag
Beispiel
Verwenden Sie <template>, um einige Inhalte zu speichern, die beim Laden der Seite ausgeblendet werden. Verwenden Sie JavaScript, um es anzuzeigen:
<button onclick="showContent()">Show hidden content</button>
<template>
<h2>Flower</h2>
<img src="img_white_flower.jpg" width="214"
height="204">
</template>
<script>
function showContent() {
var temp =
document.getElementsByTagName("template")[0];
var clon =
temp.content.cloneNode(true);
document.body.appendChild(clon);
}
</script>
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Das <template>Tag wird als Container verwendet, um einige HTML-Inhalte vor dem Benutzer zu verbergen, wenn die Seite geladen wird.
Der darin enthaltene Inhalt <template>kann später mit einem JavaScript gerendert werden.
Sie können das <template>Tag verwenden, wenn Sie HTML-Code haben, den Sie immer wieder verwenden möchten, aber nicht, bis Sie danach fragen. Um dies ohne das <template>Tag zu tun, müssen Sie den HTML-Code mit JavaScript erstellen, um zu verhindern, dass der Browser den Code darstellt.
Browser-Unterstützung
| Element | |||||
|---|---|---|---|---|---|
| <template> | 26.0 | 13.0 | 22.0 | 8.0 | 15.0 |
Globale Attribute
Das <template>Tag unterstützt die globalen Attribute in HTML .
Mehr Beispiele
Beispiel
Füllen Sie die Webseite mit einem neuen div-Element für jedes Element in einem Array. Der HTML-Code jedes div-Elements befindet sich innerhalb des Template-Elements:
<template>
<div class="myClass">I like: </div>
</template>
<script>
var myArr = ["Audi", "BMW", "Ford", "Honda", "Jaguar",
"Nissan"];
function showContent() {
var temp, item, a,
i;
temp =
document.getElementsByTagName("template")[0];
item =
temp.content.querySelector("div");
for (i = 0; i < myArr.length; i++) {
a = document.importNode(item,
true);
a.textContent += myArr[i];
document.body.appendChild(a);
}
}
</script>
Beispiel
Überprüfen Sie die Browserunterstützung für <Vorlage>:
<script>
if (document.createElement("template").content) {
document.write("Your browser supports template!");
} else {
document.write("Your browser does not supports template!");
}
</script>