Ce face <template>
Tagul <template> conține fragmente HTML care nu sunt randate pe ecran la încărcarea paginii. Imaginile din interior nu se descarcă, scripturile nu rulează, iar conținutul este invizibil.
Este ideal pentru aplicații web dinamice: definești un șablon o singură dată în HTML, iar în JavaScript îl clonezi cu template.content.cloneNode(true), îi populezi datele și îl inserezi în pagină de câte ori este nevoie.
Exemple
Exemplul 1: Șablon pentru adăugarea dinamică a unui element
Șablonul este clonat și atașat în listă prin câteva linii de JavaScript.
<ul id="lista-utilizatori"></ul>
<template id="sablon-utilizator">
<li class="utilizator">
<strong></strong> - <span></span>
</li>
</template>
<script>
const sablon = document.getElementById('sablon-utilizator');
const clona = sablon.content.cloneNode(true);
clona.querySelector('strong').textContent = 'Ana Pop';
clona.querySelector('span').textContent = 'Programator';
document.getElementById('lista-utilizatori').appendChild(clona);
</script>Ce afișează browserul
• Ana Pop - Programator (inserat curat din șablonul template)Greșeli frecvente
- Încercarea de a selecta elementele din interiorul lui template cu document.querySelector direct, în loc de template.content.querySelector.