<template>

Sumário

O template de elemento HTML <template> é um mecanismo para encapsular um conteúdo do lado cliente que não é renderizado quando a página é carregada, mas que pode posteriormente ser instanciado 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>, <video>, <audio>, <table>, <colgroup>, <thead>, <tbody>, <tfoot>, <tr>, <fieldset>, <select>, <details> elemento e <menu> 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>, <head> and <colgroup> sem um atributo span
Interface do DOM HTMLTemplateElement

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 exitê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:

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

// 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
WHATWG HTML Living Standard
The definition of 'template element' in that specification.
Living Standard Sem mudanças
HTML5
The definition of 'template element' in that specification.
Recommendation Definição Inicial

Compatibilidade de Navegadores

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Suporte Básico 26 22 (22) Edge 13 15 7.1
Característica Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Suporte Básico ? ? ? ? iOS 8

Veja também

Etiquetas do documento e colaboradores

 Colaboradores desta página: raphaguasta
 Última atualização por: raphaguasta,