Etiqueta <template> HTML

Definición y uso

<template> La etiqueta se utiliza como contenedor para ocultar algunos contents HTML al cargar la página.

<template> El contenido interno se puede presentar más tarde con JavaScript.

Si tienes algún código HTML que desees repetir pero mostrar solo cuando sea necesario, puedes usar <template> La etiqueta. Si no hay <template> La etiqueta, necesitas usar JavaScript para crear el código HTML para evitar que el navegador lo presente.

Ejemplo

Ejemplo 1

Usar <template> Para guardar algunos contents que se ocultarán al cargar la página y mostrarlos con JavaScript:

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

Prueba por ti mismo

Ejemplo 2

Rellena la página web con un nuevo elemento div para cada elemento del array. El código HTML de cada elemento div se encuentra en el elemento template:

<template>
  <div class="myClass">Me gusta: </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>

Prueba por ti mismo

Ejemplo 3

Verifica la compatibilidad del navegador con <template> Compatibilidad con:

<script>
if (document.createElement("template").content) {
  document.write("Tu navegador admite plantillas!");
} else {
  document.write("Tu navegador no admite plantillas!");
}
</script>

Prueba por ti mismo

Atributos globales

<template> La etiqueta también admite Atributos globales en HTML.

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que admite completamente la propiedad.

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