HTML <template>Tag


Beispiele

Wenn Sie das <template>-Tag verwenden, wird der Inhalt im Tag beim Laden der Seite nicht angezeigt; nach dem Laden können Sie JavaScript verwenden, um ihn anzuzeigen:

<button onclick="showContent()">Versteckten Inhalt anzeigen</button> <template> <h2>logo</h2> <img src="/static.jyshare.com/images/example-logo.png" > </template> <script> function showContent() { var temp = document.getElementsByTagName("template")[0]; var clon = temp.content.cloneNode(true); document.body.appendChild(clon); } </script>

Selbst ausprobieren »

Browser-Unterstützung

Die Zahlen in der Tabelle geben die erste Browserversion an, die das Element vollständig unterstützt.

Element
<template> 26.0 13.0 22.0 8.0 15.0

Definition und Verwendung

Das <template>-Tag definiert Inhalt, der beim Laden der Seite nicht angezeigt wird. Der Inhalt innerhalb des Tags kann später mit JavaScript gerendert werden.

Wenn Sie HTML-Code haben, der wiederverwendet werden muss, können Sie<template>ihn als allgemeine Vorlage festlegen.

Weitere Beispiele

Beispiel

Jedes Array-Element im Beispiel verwendet ein neues div-Element, um die Webseite zu füllen. Der HTML-Code für jedes div-Element befindet sich im template-Element:

<template> <div class="myClass">Ich mag:</div> </template> <script> var myArr = ["Google", "Example", "Taobao", "Wiki", "Zhihu", "Baidu"]; 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>

Selbst ausprobieren »

Beispiel

Prüfen Sie, ob der Browser das template-Tag unterstützt:

if (document.createElement("template").content) { document.write("Ihr Browser unterstützt das template-Tag!"); } else { document.write("Ihr Browser unterstützt das template-Tag nicht!"); }

Selbst ausprobieren »

Globale Attribute

Das <time>-Tag unterstütztdie globalen Attribute von HTML。

Andere Erweiterungen