Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Beste Agenturen
  • Magazin
  • Beste Agenturen
  • Magazin
Dr. Web Logo seit 1997.
  • Kontakt
  • Anmeldung
  • Newsletter
  • Beste Agenturen
  • Magazin
Menü
  • Beste Agenturen
  • Magazin
Suche
Agenturpartner werden →
Dr. Web » Design » HTML5: Wie das Template-Element komplexe Vorlagen ermöglicht

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

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • Keine Kommentare
Lesedauer: 2 Minuten
  • von Denis Potschien
  • 11. Februar 2019

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

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.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

Logo der Allgäuer Webdesign-Agentur von Thomas Soyter Der informationsdesigner.

Der Informations­designer

Kaufbeuren

YOYOBA Performance Marketing Hamburg Logo.

YOYABA

Hamburg

Carmen Hurst Webdesign Bad Homburg Logo.

Carmen Hurst | Webdesign

Bad Homburg

VABELHAVT

Innsbruck

SEOfolgreich Local SEO Agentur Muenchen

SEOfolgreich – Local SEO Agentur München

München

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Digitalagentur finden

Wir unterstützen Sie bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
Junger Mann, der in einer SEO-Agentur arbeitet arbeitet und in die Kamera lächelt.
SEO

SEO Agentur finden

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Inhaber einer WordPress-Agentur, am Tisch sitzt und in die Kamera schaut.
WordPress

WordPress Agentur finden

Wir unterstützen Sie bei der Auswahl Ihrer WordPress Agentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→

Schreibe einen Kommentar Antworten abbrechen

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

Dr. Web Logo weiss.
Fachmagazin für Online-Marketing. Seit 1997. Wissen, Software, Dienstleister: Wir bringen die Digitalisierung Ihres Unternehmens praxisnah voran. ✅

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Allgemein
  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • VPN
  • Webdesign
  • WordPress
  • Allgemein
  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • VPN
  • Webdesign
  • WordPress

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑