Zwar gibt es mit document.createElement() und anderen entsprechenden Methoden eine Möglichkeit, um per JavaScript HTML-Elemente zu erzeugen und dem DOM-Baum hinzuzufügen – komfortabel und übersichtlich ist das jedoch in der Regel nicht. Gerade ab einer gewissen Komplexität der zu erstellenden Elemente kann man schon mal den Überblick verlieren. Das HTML5-Template-Element soll für Abhilfe sorgen.
Elemente als Vorlage im Dokument ablegen
Das Prinzip des neuen Template-Elementes ist einfach. Statt per JavaScript Elemente zu erzeugen, ihnen Attribute zuzuordnen und sie zu verschachteln, wird der HTML-Quelltext einfach in ein Template-Element geschrieben:
<template>
<h1>Überschrift</h1>
<p>Hier steht <strong>ein beliebiger Text.</strong></p>
</template>
Alles, was innerhalb des Template-Elementes steht, wird vom Browser zunächst einmal ignoriert. Das heißt, der Inhalt wird zwar geparst, aber nicht angezeigt und er erscheint auch nicht im DOM-Baum des Dokumentes. Darin enthaltene Verweise (zum Beispiel zu Bildern) werden ebenfalls ignoriert und nicht geladen. Es ist nicht möglich, beispielsweise per document.getElementsByTagName() auf Elemente innerhalb des Template-Elementes zuzugreifen.
Es ist jedoch möglich, die Inhalte des Template-Elementes per .content auszulesen:
var inhalt = document.querySelector("template").content;
Im Beispiel wird der Inhalt des Templates einer Variable zugewiesen. Dieser Inhalt kann nun beispielsweise mit appendChild() an einer Stelle innerhalb des DOM-Baumes eingebettet werden:
document.querySelector("body").appendChild(inhalt);
Im Beispiel wird der Inhalt einfach dem Body hinzugefügt. Ab diesem Moment sind alle Elemente des Templates Bestandteil des DOM-Baumes und werden entsprechend behandelt. Bilder werden geladen und gegebenenfalls enthaltene Scripte können ausgeführt werden.
Kompatibilität
Derzeit ist das Template-Element nur Bestandteil des sogenannten Living Standard zu HTML5, wird aber bereits von Edge, Firefox, Chrome, Safari und Opera unterstützt. Damit erreicht es laut Can I Use über 89 Prozent der weltweiten Nutzer. Andere Browser interpretieren das Template-Element in der Regel als einfaches Block-Element. Das heißt, sie sehen den Inhalt schlicht als Bestandteil des DOM-Baumes an.
Wer das Template-Element einsetzen möchte, kann über folgende Abfrage feststellen, ob das Element vom Browser unterstützt wird:
if ("content" in document.createElement("template")) {
alert("Ja, es wird unterstützt.");
}
Noch mal zum Mitdenken: Du könntest auf die Idee kommen, dass der Template-Tag keine besonderen Vorteile gegenüber einer Klasse, die etwa auf display: none gesetzt wird, hätte. Aber, der Vorteil des Elementes ist, dass alle darin enthaltenen Elemente nicht Bestandteil des DOM-Baumes sind. Die Kindelemente eines DIV- oder anderen Elements, welches du auf display: none setzt, werden jedoch automatisch Bestandteil des DOMs. Du kannst also alles Mögliche ins Template-Element setzen (Scripte, Videos, etc.), ohne dass es sich auswirkt – bis du den Template-Inhalt per JavaScript ausliest.
Fazit: Gerade wenn es um komplexe Elementstrukturen geht, ist der Einsatz des Template-Elementes sehr viel einfacher als das Erstellen von Elementen mit JavaScript. Es spart zudem auch noch Quelltext, da die direkte HTML-Auszeichnung mit deutlich weniger Zeichen auskommt als die Variante mit document.createElement().
Suchst du nach einer Lösung, wie du HTML und CSS bearbeitest? Wir haben 10 HTML-Editoren getestet und stellen sie vor. Vielleicht ist auch für dich etwas dabei?
(Der Beitrag erschien im Original zuerst im April 2013 und wird seitdem aktuell gehalten. Das letzte Update stammt vom 10. Februar 2019)
(Artikelbild: Depositphotos)
