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

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010...

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.

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 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 noch kein HTML5-Standard und nur von Chrome unterstützt. 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.

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht

Wer das Template-Element dennoch 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.");
}

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(). Nicht weg zu diskutieren ist allerdings die mangelnde Browserunterstützung…

Der aktuellste W3C Editor’s Draft zum HTMl Template stammt vom heutigen 16. April 2013. Lesen Sie hier…

(dpe)

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.

Hinterlasse einen Kommentar

5 Kommentare auf "HTML5: Wie das Template-Element komplexe Vorlagen ermöglicht"

Benachrichtige mich zu:
avatar
Sortiert nach:   neueste | älteste | beste Bewertung
Alexander Bombis
Gast
Hej – und einen guten Morgen 🙂 Es scheint interessant zu klingen – aber im ersten Moment und vorläufig weiterhin, denke ich : Das wenn ich mir ein Object mit der gesamten Seitenstruktur in JavaScript erstelle und dieses Object nur durch ein Function laufen lasse – ich wesentlich übersichtlicher schreibe als wie mit reinem HTML Script – und das gleiche gilt für PHP – ich denke nicht das ich je in meinem Leben nochmal eine reine HTMLSeite schreiben werde – Für den Basisaufbau auf dem Server benutze ich PHP – mit Klassen schreibst du ganz schnell DOM Strukturen – und… Read more »
Kjell
Gast

Ganz erschließt sich mir der Sinn nicht – wir machen so etwas normalerweise mit einer Klasse (z.B. ‘prototype’) die standardmäßig auf ‘display: none’ gesetzt ist. Dann kann ich sie klonen und einfügen wo ich möchte.

Bilder oder andere Elemente setzte ich ja bei einer Vorlage doch eher selten – die sollen meist mit angepasst werden. Stillelement / grafiken sowieso über css – daher werden sie nur einmal geladen.

Also, ich meine nur, dass der minimale Vorteil beim Rendering und Memory-Usage mMn nicht für ein eigenen HTML-Tag steht…

wpDiscuz