HTML <template> Tag
Exemple
Utilisez <template> pour contenir du contenu qui sera caché lorsque la page se charge. Utilisez JavaScript pour l'afficher :
<button onclick="showContent()">Afficher le contenu caché</button>
<template>
<h2>Fleur</h2>
<img src="img_white_flower.jpg" width="214" height="204">
</template>
<script>
function showContent() {
let temp = document.getElementsByTagName("template")[0];
let clon = temp.content.cloneNode(true);
document.body.appendChild(clon);
}
</script> Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et Utilisation
La balise <template> est utilisée comme conteneur pour du contenu HTML caché de l'utilisateur lors du chargement de la page.
Le contenu à l'intérieur de <template> peut être rendu plus tard avec JavaScript.
Vous pouvez utiliser la balise <template> si vous avez du code HTML que vous souhaitez réutiliser plusieurs fois, mais pas avant de le demander. Pour ce faire sans la balise <template> , vous devez créer le code HTML avec JavaScript pour empêcher le navigateur de le rendre.
Support des Navigateurs
| Élément | |||||
|---|---|---|---|---|---|
| <template> | 26.0 | 13.0 | 22.0 | 8.0 | 15.0 |
Attributs Globaux
La balise <template> prend en charge les Attributs Globaux en HTML .
Plus d'Exemples
Exemple
Remplissez la page web avec un nouvel élément div pour chaque élément d'un tableau. Le code HTML de chaque élément div se trouve à l'intérieur de l'élément template :
<template>
<div class="myClass">J'aime : </div>
</template>
<script>
let myArr = ["Audi", "BMW", "Ford", "Honda", "Jaguar", "Nissan"];
function showContent() {
let temp, item, a, i;
temp = document.getElementsByTagName("template")[0];
item = temp.content.querySelector("div");
for (i = 0; i < myArr.length; i++) {
a = document.importNode(item, true);
a.textContent += myArr[i];
document.body.appendChild(a);
}
}
</script> Exemple
Vérifiez le support des navigateurs pour <template> :
<script>
if (document.createElement("template").content) {
document.write("Votre navigateur prend en charge le template !");
} else {
document.write("Votre navigateur ne prend pas en charge le template !");
}
</script>