CSS, HTML und Javascript mit {stil}

HTML template-Tag – Vorlage für Javascript

Templates sind Vorlagen und HTML im template-Tag wird auf der Seite 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 >

Dann muss ein Script nicht jedesmal den komplexen Ablauf von createElement und insertBefore oder appendChild durchlaufen, 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="958.4" width="1061" 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.

<template>