HTML template-Tag – Vorlage für Javascript

HTML template für Javascript

Das template-Tag enthält HTML-Markup, das auf der Seite nicht angezeigt wird, sondern als Vorlage für Javascript dient. So muss ein Script die HTML-Struktur für dynamische erzeugte Elemente nicht mehr mit vielen Anweisungen erzeugen, sondern kann einen ganzen Block direkt aus dem Template-Tag entnehmen.

18-12-15 SITEMAP

< template >

Schon das Einfügen weniger HTML-Elemente verbraucht viele Zeilen Javascript, mischt obendrein Javascript und HTML, ist nicht pflegefreundlich und schnell schwer lesbar.

Mit HTML-Markup in einem HTML-Template-Tag 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-Tags direkt nutzen.

HTML Template Tag für Javascript
<template class="template">
  <header class="mynewheader">
    <div class="cake">
      <svg height="100%" width="100%" viewBox="0 0 1061 958">
        <rect height="960" width="1060" y="0" x="0" fill="#fbf4ef"/>
        <use xlink:href="#cake1" />
      </svg>
    </div>
    <h4>Oat cake gummi bears</h4>
    <p>Soufflé halvah muffin chocolate cake toffee cake sweet roll ice</p>
  </header>
  …
</template>

Das Template wird erweckt, wenn der Viewport mindestens 720px und höchsten 1259px breit ist: matchMedia ist das Javascript-Äquivalent zu CSS Media Queries.

Die Anweisung template.content.cloneNode(true) klont das HTML aus dem template-Tag und bar.appendChild setzt das frisch erzeugte Element in die Seite.

Javascript: Einfügen des Templates
const mql = window.matchMedia 
          ("(min-width:720px) and (max-width: 1259px)");
changeHeader(mql);
mql.addListener(changeHeader);

function changeHeader(mql) {
   if (mql.matches) {
      document.querySelector('#bar').appendChild(
        document.querySelector('template').content.cloneNode(true));
   } 
}

Das HTML template-Tag 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 langatmige Strings in Hochkommas erzeugen: in einem Script-Tag mit type="text/template".

<script id="script-template" type="text/template">
   <div style="background:gainsboro">Aus dem Hut gezogen</div>
</script>

Die Konstruktion mittels type text/template validiert sogar, IE11 kommt gut klar und sogar IE10 konnte bereits das HTML aus dem Script-Tag 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-Tag 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>-Tag 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-Tag unabhängig voneinander oder miteinander kombiniert genutzt werden.