<template>

Sumário

O elemento HTML <template> é um mecanismo para encapsular um conteúdo do lado do cliente que não é renderizado quando a página é carregada, mas que pode ser instanciado posteriormente em tempo de execução usando JavaScript.

Pense no template como um fragmento de conteúdo, que é armazenado para um possível uso futuro no documento. Enquanto o parser processa o conteúdo do elemento <template> ao carregar a página, isso apenas garante que o conteúdo é válido; porém, o conteúdo do elemento ainda não foi renderizado.

Conteúdo de categorias Metadata content, flow content, phrasing content, script-supporting element
Conteúdo Permitido Metadata content, flow content, qualquer conteúdo HTML válido que é permitido para ocorrer dentro do <ol>, <dl>, <figure>, <ruby>, <object> (en-US), <video>, <audio>, <table>, <colgroup> (en-US), <thead> (en-US), <tbody> (en-US), <tfoot>, <tr> (en-US), <fieldset>, <select>, <details> elemento e <menu> (en-US) cujo tipo de atributo está em estado de menu de contexto.
Tags omitidas None, both the starting and ending tag are mandatory.
Elementos pais permitidos <body>, <frameset> (en-US), <head> and <colgroup> (en-US) sem um atributo span
Interface do DOM HTMLTemplateElement (en-US)

Atributos

Esse elemento inclui os atributos globais.

Há também um atributo content, o qual é read-only e provê acesso ao conteúdo do template. A existência desse atributo content é frequentemente usada como um modo de determinar se o navegador do usuário suporta o element <template>.

Exemplo

Primeiro, nós começamos com um pedaço de HTML como exemplo:

html

<table id="producttable">
  <thead>
    <tr>
      <td>UPC_Code</td>
      <td>Product_Name</td>
    </tr>
  </thead>
  <tbody>
    <!-- existing data could optionally be included here -->
  </tbody>
</table>

<template id="productrow">
  <tr>
    <td class="record"></td>
    <td></td>
  </tr>
</template>

No início, nós temos uma tabela que irá receber conteúdo inserido via Javascript. Em seguida, vem o template, que descreve a estrutura de um fragmento de HTML que representa uma única linha da tabela.

Agora que a tabela foi criada e o template definido, nós usamos JavaScript para inserir linhas na tabela, cada linha é construída usando o template como base.

js

// Teste se seu navegador suporta o template HTML checando
// a presença do atribute content no elemento template .
if ("content" in document.createElement("template")) {
  // Instancie a tabela com o HTML tbody e a row com o template
  var t = document.querySelector("#productrow"),
    td = t.content.querySelectorAll("td");
  td[0].textContent = "1235646565";
  td[1].textContent = "Stuff";

  // Clone a nova row e insira-a na tabela
  var tb = document.getElementsByTagName("tbody");
  var clone = document.importNode(t.content, true);
  tb[0].appendChild(clone);

  // Crie uma nova row
  td[0].textContent = "0384928528";
  td[1].textContent = "Acme Kidney Beans";

  // Clone a nova row e insira-a na tabela
  var clone2 = document.importNode(t.content, true);
  tb[0].appendChild(clone2);
} else {
  // Ache outro modo de adicionar as rows na tabela, pois
  // o elemento HTML template não é suportado.
}

O resultado é a tabela original do HTML, com duas novas linhas inseridas via Javascript:

Especificações

Especificação Estado Comentário
HTML Living Standard
The definition of 'template element' in that specification.
Padrão em tempo real Sem mudanças
HTML5
The definition of 'template element' in that specification.
Recomendação Definição Inicial

Compatibilidade de Navegadores

BCD tables only load in the browser

Veja também