<template>

Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

Zusammenfassung

Das HTML template-Element <template> dient dazu, Client-seitige Inhalte zu gruppieren, die nicht gerendert werden, wenn die Seite geladen wird, sondern anschließend zur Laufzeit mittels JavaScript gerendert werden können.

Template kann als Inhaltsfragment aufgefasst werden, das für eine spätere Verwendung im Dokument gespeichert wird. Die Inhalte von <template> werden allerdings beim Laden der Seite geparst, um Ihre Validität sicher zu stellen.

Inhaltskategorien Metadata content, flow content, phrasing content, script-supporting element
Erlaubte Inhalte Metadata content, flow content, jeder gültige HTML Inhalt, der innerhalb der folgenden Elemente <ol>, <dl>, <figure>, <ruby>, <object>, <video>, <audio>, <table>, <colgroup>, <thead>, <tbody>, <tfoot>, <tr>, <fieldset>, <select>, <details> erlaubt ist und <menu>, dessen type-Attribut sich im Zustand popup menu befindet.
Tag omission Keine, sowohl das Anfangs- als auch das End-Tag sind erforderlich.
Permitted parent elements <body>, <frameset>, <head> und <colgroup> ohne span Attribut
DOM interface HTMLTemplateElement

Attribute

Das Element beinhaltet die global attributes.

Es gibt auch ein content Attribut, das nur read-only, also nur leseberechtigt ist. Dieses Attribut gewährt Zugriff auf die Inhalte von template. Das content Attribut wird oftmals genutzt, um den Browser-Support eines bestimmten Browsers für das <template> Element festzustellen.

Beispiele

Im Folgenden zuerst der HTML Code des Beispiels:

<table id="producttable">
  <thead>
    <tr>
      <td>UPC_Code</td>
      <td>Product_Name</td>
    </tr>
  </thead>
  <tbody>
    <!-- existierende Daten könnten optional hier eingefügt werden -->
  </tbody>
</table>

<template id="productrow">
  <tr>
    <td class="record"></td>
    <td></td>
  </tr>
</template> 

Im Weiteren der JavaScript Code, mit dem der HTML Code instantiiert werden könnte:

// Browsersupport-Check, indem die Existenz des content Attributs
// des template Elements geprüft wird.
if ('content' in document.createElement('template')) {

  // Tabelle mit dem existierenden HTML tbody und der Zeile (row) aus dem template Element instantiieren
  var t = document.querySelector('#productrow'),
  td = t.content.querySelectorAll("td");
  td[0].textContent = "1235646565";
  td[1].textContent = "Stuff";

  // Neue Zeile (row) klonen und in die Tabelle einfügen
  var tb = document.getElementsByTagName("tbody");
  var clone = document.importNode(t.content, true);
  tb[0].appendChild(clone);
  
  // Neue Zeile erstellen
  td[0].textContent = "0384928528";
  td[1].textContent = "Acme Kidney Beans";

  // Neue Zeile klonen und in die Tabelle einfügen
  var clone2 = document.importNode(t.content, true);
  tb[0].appendChild(clone2);

} else {
  // Wenn das HTML template element nicht unterstützt wird
  // muss die Tabelle auf anderem Weg erzeugt werden
}

Das Ergebnis ist die ursprüngliche HTML Tabelle an die zwei neuen Zeilen mittel JavaScript angehängt wurde.

Hier kann das live-Beispiel aufgerufen werden (Code kann hier eingesehen werden).

Spezifikationen

Spezifikationen Status Kommentar
WHATWG HTML Living Standard
Die Definition von 'template element' in dieser Spezifikation.
Lebender Standard No change
HTML5
Die Definition von 'template element' in dieser Spezifikation.
Empfehlung Initial definition

Browser Kompabilität

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 26 22 (22) Nicht unterstützt 15 7.1
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? ? ? ? iOS 8

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: Sebastianz, phil-schreiber
 Zuletzt aktualisiert von: Sebastianz,