HTML template-Tag – Vorlage für Javascript

Templates sind Vorlagen für Javascript und Markup im template-Tag wird vom Browser nicht angezeigt

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.

< 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.appenChild setzt das frisch erzeugte Element in die Seite.

Javascript: Einfügen des Templates
var 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 holt das HTML aus dem Script-Tag erst per Javascript hervor.

Mit nur zwei Zeilen Javascript:

<script>
let template = document.querySelector("#script-template").innerHTML;
document.querySelector("#insertTemplate").innerHTML = template;
</script>
<template>