<template>

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.

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

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:

table { background: #000; } table td { background: #fff; } 

• Web components: <content>, <shadow>