< template >
Schon das Einfügen weniger HTML-Elemente verbraucht viele Zeilen Javascript, mischt obendrein Javascript und HTML, ist nicht pflegefreundlich und schwer lesbar.
<template id="template"> <div class="block-column"> <header> <h4 class="headline"></h4> <img class="banner" loading="lazy" src="" width="300" height="300" alt=""> </header> <div class="price"></div> <div class="text"></div> <div class="tartlink"><a class="cartlink" href="">In den Warenkorb</a></div> </div> </template>
Mit HTML-Markup in einem HTML-Template-Element muss ein Script nicht jedesmal den komplexen Ablauf von createElement und insertBefore oder appendChild durchlaufen oder lange Zeichenketten für innerHTML erzeugen, sondern kann den Inhalt des template-Elements direkt nutzen.
Die content-Eigenschaft greift auf den Inhalt des Fragments zu. cloneNode kopiert oder klont den Inhalt innerhalb der for-Schleife für jede Instanz.
Fast immer kommen die eingesetzten Werte aus Anwendungen auf dem Server oder einer JSON-Datei.
.append(clone) ist der letzte Schritt innerhalb der Schleife: Das geklonte Fragment wird an ein vorhandenes Element im Dokument gehangen.
HTML-template mit Javascript füllen
Die Anweisung template.content.cloneNode(true) kopiert das HTML aus dem template-Element und .append(clone) platziert das frisch gebackene Element im Dokument.
Javascript: Einfügen des Templates
const templ = document.querySelector("#template")
for (const elem of products) {
let clone = templ.content.cloneNode(true);
clone.querySelector(".banner").src = elem.imgsrc;
clone.querySelector(".banner").alt = elem.cake;
clone.querySelector(".headline").textContent = elem.cake;
clone.querySelector(".price").textContent = `${elem.price} €`;
clone.querySelector(".cartlink").href = elem.sku;
clone.querySelector(".text").textContent = elem.text;
document.querySelector(".block-columns").append(clone);
}
Das HTML template-Element wird von Chrome, Firefox, Opera, Safari und Microsoft Edge unterstützt, nicht von IE11.
HTML mit Javascript erzeugen: type text/template
Trotz des Widerstands von IE11 läßt sich das HTML-Markup ohne createElement und setAttribute mit langatmigem Strings in Hochkommas erzeugen: in einem Script-Tag mit type="text/template".
Die Konstruktion mittels type text/template validiert sogar, IE11 kommt gut klar und sogar IE10 konnte bereits das HTML aus dem Script-Element erst per Javascript hervorholen.
Mit nur zwei Zeilen Javascript:
<script>
let template = document.querySelector("#script-template").innerHTML;
document.querySelector("#insertTemplate").innerHTML = template;
</script>
Web Components
Das HTML-Template-Element ist ein tragendes Element der Web Components, einer Reihe von Techniken, die wiederverwendbare Blöcke aufbauen. Mit dem traditionellen Aufbau von HTML, CSS und Javascript entsteht bei den aktuellen Anforderungen an Webseiten und Apps ein Konglomerat, das die Wiederverwertbarkeit von Design-Elementen schwer macht.
Neben dem <template>-Element stehen Custom Elements mit Templates, Verhalten und eigenen Tagnamen in den Web Components. Wie die klassischen HTML-Elemente des Standards sind auch Custom Elements HTML-Standard, auch wenn sie <panetone-teig> oder <belgischer-pansendale> heißen. Und dann wäre da noch das Shadow DOM, das CSS und Javascript ähnlich wie ein iframe isoliert.
class MeikeRezepte extends HTMLElement {
connectedCallback () {
this.innerHTML = "<h2>Aus Meikes Rezeptbuch</h2>";
}
}
customElements.define ("meike-rezept", MeikeRezepte);
… HTML …
<meike-rezept></meike-rezept>
Diese Techniken können wie das Template-Element unabhängig voneinander oder miteinander kombiniert genutzt werden.
Template-Systeme
Neben dem schlichten HTML-Template-Element stehen uns heute weitere Techniken zur Verfügung. Javascript hat mit ES6 "Template Literals" ins Rennen geworfen, die von allen modernen Browsern unterstützt werden. Backticks `(Accent Grave auf der Tastatur) und Variablen der Form ${price} anstelle verschachtelter Hochkommas und +-Zeichen erleichtern das Erzeugen von HTML-Fragmenten.
Die am häufigsten verwendeten Templates für Javascript sind Template-Systeme wie Handlebars oder Mustache, die in erster Linie mit Node.js eingesetzt werden. Insgesamt aber machen sich Template Literals auf den Weg, um Template-Systeme – mitsamt HTML-Template-Elementen – zu ersetzen.
HTML-data-Element
HTML hat ein spezielles Feld für die maschinenlesbare Daten: data. Das value-Attribut des HTML data-Tags liefert den maschinenlesbaren Wert und der Inhalt wird dem Benutzer als lesbarer Text geliefert.
<data value="xxx">Inhalt</data>
Das erspart ein weiteres div- oder span-Element.
