<template>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since November 2015.

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

Specification
HTML Standard
# the-template-element

Compatibilidade de Navegadores

BCD tables only load in the browser

Veja também