template gebruiken voor rendering met JavaScript

Pas de kloon aan voordat je deze invoegt: zoek elementen binnen de kloon, stel tekstinhoud in en voeg eventlisteners toe. Voeg de kloon daarna toe aan de DOM: container.appendChild(clone). Elke aanroep van cloneNode() maakt een onafhankelijke kopie — je kunt de ene kopie aanpassen zonder de andere te beïnvloeden.

Combineer templates met Array.forEach of Array.map om lijsten weer te geven: kloon voor elk item in de gegevens het template, vul de waarden in en voeg de kloon toe aan een lijstcontainer. Dit patroon lijkt op het gebruik van een framework, maar is gebouwd met standaard-HTML en JavaScript.

Definieer een <template> met daarin een <tr> met cellen. Kloon het template en vul het voor elke gegevensrij in. Zo vermijd je het samenvoegen van tekenreeksen voor het genereren van HTML — escapen is niet nodig, omdat je textContent gebruikt in plaats van innerHTML.

Templates worden nooit automatisch weergegeven. Daardoor zijn ze veilig voor het opslaan van fragmenten die voorwaardelijk worden weergegeven: toon een template met "geen resultaten" alleen wanneer een zoekopdracht niets oplevert, een fouttemplate alleen bij een netwerkfout en een laad-skelet tijdens het ophalen van gegevens.

Een template kan andere templates bevatten — geneste templates blijven inactief binnen het DocumentFragment van het buitenste template. Zo kun je onderdeelachtige hiërarchieën maken waarin een buitenste template de binnenste templates kloont en vervolgens naar behoefte activeert.

Stijlen binnen een tag <style> van een template worden niet op het document toegepast — ze blijven inactief totdat het template als instantie wordt gebruikt en de inhoud naar de actieve DOM wordt verplaatst. Zo kunnen templates hun eigen stijlen bevatten zonder de pagina te vervuilen.

Het parsen van innerHTML is synchrone verwerking van een HTML-tekenreeks — HTML wordt elke keer opnieuw geparseerd. template.cloneNode() kopieert een al geparseerde structuur. Bij herhaalde weergave van dezelfde structuur is het klonen van een template sneller en vermijd je XSS-risico's door het samenvoegen van tekenreeksen.

Het element template heeft geen ingebouwde gegevensbinding — je moet elke kloon handmatig doorzoeken en vullen. Voor complexe behoeften op het gebied van gegevensbinding is een framework of bibliotheek geschikter. Templates zijn bedoeld voor eenvoudige, handmatige weergavepatronen zonder de extra belasting van een framework.

Het element template wordt door alle moderne browsers ondersteund (IE11 had gedeeltelijke ondersteuning). Voor omgevingen die IE moeten ondersteunen, kun je een polyfill gebruiken door de template-inhoud bij het initialiseren te parsen. Gebruik template in moderne projecten zonder polyfill.

Het element template bevat inactieve, vooraf geparseerde HTML-fragmenten. Door template.content te klonen maak je onafhankelijke instanties voor handmatige gegevensbinding. In combinatie met het instellen van textContent (zonder XSS) maken templates frameworkachtige lijstweergave, voorwaardelijke UI en herbruikbare HTML-patronen mogelijk met alleen standaardbrowser-API's.