Tag <template> HTML

Definição e uso

<template> tag como contêiner para ocultar alguns conteúdos HTML do usuário ao carregar a página.

<template> O conteúdo interno pode ser exibido mais tarde usando JavaScript.

Se você tiver algum código HTML que deseja reutilizar, mas que deve ser exibido apenas quando necessário, você pode usar <template> tag. <template> Para evitar que o navegador exiba o código HTML usando a tag, você precisa criar o código HTML com JavaScript.

Exemplo

Exemplo 1

Usando <template> Para salvar alguns conteúdos que serão ocultados ao carregar a página e usá-los para mostrar com JavaScript:

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

Experimente você mesmo

Exemplo 2

Para cada item do array, preencha a página com um novo elemento div. O código HTML de cada elemento div está no elemento 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>

Experimente você mesmo

Exemplo 3

Verifique o suporte do navegador para <template> Suporte para:

<script>
if (document.createElement("template").content) {
  document.write("Seu navegador suporta template!");
} else {
  document.write("Seu navegador não suporta template!");
}
</script>

Experimente você mesmo

Atributos globais

<template> A tag também suporta Atributos globais do HTML.

Suporte do navegador

Os números na tabela indicam a versão do navegador que suportou a propriedade pela primeira vez.

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