CSS, HTML und Javascript mit {stil}

HTML-Template-Tag und cloneNode

Javascript clone from template

Das HTML-template-Tag enthält ein HTML-Fragment – z.B, Zeilen einer Tabelle, figure-Tags mit figcaption und img. Der Inhalt des template-Tags wird auf der Seite nicht angezeigt, bevor Javascript das Fragment klont und ins DOM einfügt.

Wer PHP programmiert kennt Template-Systeme wie Smarty oder Twigg: Templates sind Vorlagen aus HTML für den wiederholten Einsatz. Mehr oder minder alle Programmiersprachen arbeiten mit Template-Systemen.

Templates sind z.B. für Wiederholungen wie Zeilen einer Tabelle, Listenelemente und Bilder einer Slideshow gedacht.

Javascript hatte kein Template-System im Angebot. HTML-Fragmente werden aufwändig mit createElement erzeugt und zu einem Fragment zusammengesetzt. Erst HTML5 bringt Templates, die mit Javascript cloneNode in »echte« HTML-Fragmente umgewandelt und eingebunden werden.

Vorher ist das Markup kein Teil des DOMs und kann auch nicht mit Methoden wie document.getElementById angesprochen werden.

Inhalte eines Template-Tags werden erst heruntergeladen, wenn der Template-Code offiziell geklont und eingebunden ist: Bilder in einem Template-Tag werden nicht geladen.

Das Template für die Slideshow ist schlicht und kann im head oder an belieber Stelle im body stehen.

TEMPLATE
<template id="t">
   <figure>
      <img>
      <figcaption></figcaption>
   </figure>
</template>

Das Markup für die Slideshow ist leer.

SLIDESHOW
<div class="bss-slides"></div>
JAVASCRIPT
var src = [['beach.png','Am Strand'],['luftschloss.png', 'Luftschlösser '],['fishing.png','Trout fishing in america']];

var t = document.querySelector('#t');
var figcaption = t.content.querySelector('figcaption');
var img = t.content.querySelector('img');
var l = src.length; 

for (var i=0; i<l; i++) {
   figcaption.innerHTML = src[i][1];
   img.setAttribute('src',src[i][0]);
   img.setAttribute('alt',src[i][1]);
   var clone = document.importNode(t.content, true);
   document.querySelector('.bss-slides').appendChild (clone);
}

makeBSS('.bss-slides');

Das Script erzeugt das Markup für die Slideshow:

<figure>
   <img src="beach.png" alt="Am Strand">
   <figcaption>Am Strand</figcaption>
</figure>

…

<figure>
   <img src="summr.png" alt="Easing at the beach">
   <figcaption>Easing at the beach</figcaption>
</figure>

makeBSS ist der Aufruf für Better Simple Slideshow von Mark Less A better simple Slideshow, ein Slideshow ohne jQuery.

Microsoft EdgeHTML 13 (Edge 25) hat template-Support an Bord (ich hatte schon Bedenken, mit "13" könnte 3013 gemeint sein).