HTML <template> Tag

Definition und Verwendung

<template> Tag als Container verwenden, um einige HTML-Inhalte zu verstecken, die beim Laden der Seite für den Benutzer versteckt werden.

<template> Der Inhalt kann später mit JavaScript dargestellt werden.

Wenn Sie einige HTML-Code haben, den Sie wiederholt verwenden möchten, aber nur bei Bedarf anzeigen möchten, können Sie <template> Tag. Ohne <template> Mit dem Tag, müssen Sie HTML-Code mit JavaScript erstellen, um zu verhindern, dass der Browser diesen Code darstellt.

Beispiel

Beispiel 1

Verwenden Sie <template> Um einige Inhalte zu speichern, die beim Laden der Seite versteckt werden, und sie mit JavaScript anzuzeigen:

<button onclick="showContent()">Verborgene Inhalte anzeigen</button>
<template>
  <h2>Blume</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>

Probieren Sie es selbst aus

Beispiel 2

Füllen Sie die Webseite mit neuen div-Elementen für jedes Element im Array. Der HTML-Code jedes div-Elements befindet sich im Template-Element:

<template>
  <div class="myClass">Ich mag: </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>

Probieren Sie es selbst aus

Beispiel 3

Überprüfen Sie, ob der Browser <template> Unterstützung:

<script>
if (document.createElement("template").content) {
  document.write("Ihr Browser unterstützt Template!");
} else {
  document.write("Ihr Browser unterstützt kein Template!");
}
</script>

Probieren Sie es selbst aus

Globale Attribute

<template> Das Tag unterstützt auch Globale Attribute in HTML.

Browserunterstützung

Die in der Tabelle genannten Zahlen beziehen sich auf die erste Version des Browsers, die diese Eigenschaft vollständig unterstützt.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
26.0 13.0 22.0 8.0 15.0