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

* Some parts of this feature may have varying levels of support.

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 Nenhuma, tanto a tag inicial quanto a final são obrigatórias.
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
# the-template-element

Compatibilidade de Navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
template
shadowrootclonable
shadowrootdelegatesfocus
shadowrootmode
shadowrootserializable
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
Uses a non-standard name.
Has more compatibility info.

Veja também