HTML <template>Balise


Exemples

En utilisant la balise <template>, le contenu de la balise ne sera pas affiché lors du chargement de la page ; après le chargement, vous pouvez utiliser JavaScript pour l'afficher :

<button onclick="showContent()">Afficher le contenu masqué</button> <template> <h2>logo</h2> <img src="/static.jyshare.com/images/example-logo.png" > </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 »

Prise en charge des navigateurs

Les nombres du tableau indiquent la première version du navigateur qui prend entièrement en charge l'élément.

Élément
<template> 26.0 13.0 22.0 8.0 15.0

Définition et utilisation

La balise <template> définit un contenu qui est masqué lors du chargement de la page. Le contenu à l'intérieur de la balise peut être rendu plus tard à l'aide de JavaScript.

Si vous avez du code HTML qui doit être réutilisé, vous pouvez utiliser<template>le définir comme modèle courant.

Plus d’exemples

Exemple

Chaque élément du tableau dans l'exemple utilise un nouvel élément div pour remplir la page web. 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> var myArr = ["Google", "Example", "Taobao", "Wiki", "Zhihu", "Baidu"]; 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

Vérifiez si le navigateur prend en charge la balise template :

if (document.createElement("template").content) { document.write("Votre navigateur prend en charge la balise template !"); } else { document.write("Votre navigateur ne prend pas en charge la balise template !"); }

Essayez-le vous-même »

Attributs globaux

La balise <time> prend en chargeles attributs globaux HTML。

Autres extensions