Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
Denis Potschien 11. Februar 2019

HTML5: Wie das Template-Element komplexe Vorlagen ermöglicht

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.

Anzeige

templateelement

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().

(Der Beitrag erschien im Original zuerst im April 2013 und wird seitdem aktuell gehalten. Das letzte Update stammt vom 10. Februar 2019)

(Artikelbild: Depositphotos)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.