HTML <template>Etiqueta


Ejemplo

Al usar la etiqueta <template>, el contenido dentro de esta etiqueta no se mostrará al cargar la página; después de la carga, puedes usar JavaScript para mostrarlo:

<button onclick="showContent()">Mostrar contenido oculto</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>

Pruébalo »

Soporte del navegador

Los números en la tabla indican la versión del primer navegador que admite el elemento.

Elemento
<template> 26.0 13.0 22.0 8.0 15.0

Definición de la etiqueta e instrucciones de uso

La etiqueta <template> define contenido que se oculta al cargar la página; el contenido dentro de esta etiqueta se puede renderizar más tarde con JavaScript.

Si tienes algún código HTML que necesites reutilizar, puedes usar<template>para establecerlo como una plantilla común.

Más ejemplos

Ejemplo

En el ejemplo, cada elemento del arreglo se usa para rellenar la página web con un nuevo elemento div. El código HTML de cada elemento div está dentro del elemento template:

<template> <div class="myClass">Me gusta:</div> </template> <script> var myArr = ["Google", "Ejemplo", "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>

Pruébalo »

Ejemplo

Comprueba si el navegador admite la etiqueta <template>:

if (document.createElement("template").content) { document.write("¡Tu navegador admite la etiqueta <template>!"); } else { document.write("¡Tu navegador no admite la etiqueta <template>!"); }

Pruébalo »

Atributos globales

La etiqueta <time> admitelos atributos globales de HTML.。

Otras extensiones