Balise HTML <modèle>
Exemple
Utilisez <template> pour contenir du contenu qui sera masqué lors du chargement de la page. Utilisez JavaScript pour l'afficher :
<button onclick="showContent()">Show hidden content</button>
<template>
<h2>Flower</h2>
<img src="img_white_flower.jpg" width="214"
height="204">
</template>
<script>
function showContent() {
var temp =
document.getElementsByTagName("template")[0];
var 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 <template>balise est utilisée comme conteneur pour contenir du contenu HTML caché à l'utilisateur lors du chargement de la page.
Le contenu à l'intérieur <template>peut être rendu plus tard avec un JavaScript.
Vous pouvez utiliser la <template>balise si vous avez du code HTML que vous souhaitez utiliser encore et encore, mais pas tant que vous ne l'avez pas demandé. Pour ce faire sans la <template>balise, vous devez créer le code HTML avec JavaScript pour empêcher le navigateur de restituer le code.
Prise en charge du navigateur
| Element | |||||
|---|---|---|---|---|---|
| <template> | 26.0 | 13.0 | 22.0 | 8.0 | 15.0 |
Attributs globaux
La <template>balise 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">I like: </div>
</template>
<script>
var myArr = ["Audi", "BMW", "Ford", "Honda", "Jaguar",
"Nissan"];
function showContent() {
var 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 la prise en charge du navigateur pour <template> :
<script>
if (document.createElement("template").content) {
document.write("Your browser supports template!");
} else {
document.write("Your browser does not supports template!");
}
</script>