Balise <template> HTML

Définition et utilisation

<template> est utilisé comme conteneur pour cacher certains contenus HTML à l'utilisateur lors du chargement de la page.

<template> Le contenu interne peut être présenté ultérieurement avec JavaScript.

Si vous avez du code HTML que vous souhaitez réutiliser mais qui ne doit être visible que lorsque nécessaire, vous pouvez utiliser <template> élément . <template> L'utilisation de l'élément , vous devez créer du code HTML avec JavaScript pour empêcher le navigateur de le présenter.

Exemple

Exemple 1

Utiliser <template> Pour sauvegarder certains contenus qui seront cachés au chargement de la page. Utilisez JavaScript pour les 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() {
  var temp = document.getElementsByTagName("template")[0];
  var clon = temp.content.cloneNode(true);
  document.body.appendChild(clon);
}
</script>

Essayez-le vous-même

Exemple 2

Remplir chaque élément de l'array avec un nouvel élément div sur la page web. Le code HTML de chaque élément div se trouve dans l'élément template :

<template>
  <div class="myClass">J'aime: </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>

Essayez-le vous-même

Exemple 3

Vérifiez le navigateur pour <template> Support :

<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>

Essayez-le vous-même

Attributs globaux

<template> Les balises prennent également en charge Attributs globaux dans HTML.

Support du navigateur

Les numéros dans le tableau indiquent la version du navigateur qui prend en charge cette propriété pour la première fois.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
26.0 13.0 22.0 8.0 15.0