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