Tag <template>

Definições e uso

A tag <template> é usada como um container para armazenar algum conteúdo HTML escondido do usuário assim que a página carregar

O conteúdo dentro de um <template> pode ser renderizado mais tarde com um JavaScript

Você pode usar a tag <template> se tiver algum código HTML que você queira usar várias vezes, mas não até você ativamente pedi-lo. Para fazer isso sem a tag <template>, você deverá criar um código HTML com JavaScript para prevenir o navegador de renderizar o código.

Exemplos


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

Atributos

Esta tag suporta apenas Atributos Globais.