5.1 Tag <template>
A tag <template> em HTML oferece aos desenvolvedores a possibilidade de definir fragmentos de código HTML que não serão exibidos ao carregar a página, mas podem ser usados posteriormente via JavaScript. Isso é especialmente útil para criação e inserção dinâmicas de conteúdo, como itens de lista, cartões de produtos e outras estruturas repetitivas.
O elemento <template> é usado para armazenar código HTML que não será exibido na página imediatamente. O conteúdo dentro de <template> não é renderizado pelo navegador ao carregar a página, mas está disponível através do DOM (Document Object Model) e pode ser clonado e inserido no documento usando JavaScript.
Sintaxe:
<template>
<!-- Conteúdo do template -->
</template>
Principais características da tag <template>
- Ocultação do conteúdo: o conteúdo da tag
<template>não é exibido na página ao carregá-la. - Uso de JavaScript: o conteúdo da tag
<template>pode ser clonado e inserido no DOM através de JavaScript. - Carregamento adiado: permite carregar e exibir conteúdo somente conforme necessário, o que pode melhorar o desempenho da página.
Exemplo de uso da tag <template>
Neste exemplo, ao clicar no botão "Add Item", um novo item de lista é criado e adicionado à lista <ul>. O template para o novo item de lista é definido dentro da tag <template>.
<button id="addButton">Add Item</button>
<ul id="itemList"></ul>
<template id="itemTemplate">
<li class="item">This is a new item</li>
</template>
// Pegamos as referências para os elementos no DOM que usaremos
const addButton = document.getElementById('addButton'); // Botão "Adicionar"
const itemList = document.getElementById('itemList'); // Lista onde adicionaremos os itens
const itemTemplate = document.getElementById('itemTemplate'); // Template do item de lista
// Adicionamos um listener de evento no botão "Adicionar"
addButton.addEventListener('click', () => {
// Clonamos o conteúdo do template do item de lista
const newItem = itemTemplate.content.cloneNode(true); // true significa clonagem profunda (incluindo todos os elementos filhos)
// Adicionamos o novo item à lista
itemList.appendChild(newItem);
});
5.2 Exemplo: geração de cartões de produto
Com <template> e JavaScript, podemos, por exemplo, gerar uma lista de elementos — cartões de produto.
Exemplo de uso da tag <template>:
<h1>Lista de produtos</h1>
<div id="productList"></div>
<template id="productTemplate">
<div class="item">
<h2 class="title"></h2>
<p class="description"></p>
<span class="price"></span>
</div>
</template>
// Aguardamos o carregamento completo do DOM antes de executar o script
document.addEventListener('DOMContentLoaded', () => {
// Array de dados dos produtos
const products = [
{ title: 'Produto 1', description: 'Descrição do produto 1', price: '100 dólar' },
{ title: 'Produto 2', description: 'Descrição do produto 2', price: '200 dólar' },
{ title: 'Produto 3', description: 'Descrição do produto 3', price: '300 dólar' },
];
// Pegamos as referências para os elementos no DOM
const productList = document.getElementById('productList'); // Contêiner para a lista de produtos
const template = document.getElementById('productTemplate').content; // Template do elemento produto
// Iteramos sobre o array de produtos e criamos um elemento na lista para cada um
products.forEach(product => {
// Clonamos o template do produto
const clone = document.importNode(template, true); // true - clonagem profunda
// Preenchemos os dados no template clonado
clone.querySelector('.title').textContent = product.title;
clone.querySelector('.description').textContent = product.description;
clone.querySelector('.price').textContent = product.price;
// Adicionamos o template preenchido à lista de produtos
productList.appendChild(clone);
});
});
Explicação
- Tag
<template>: contém código HTML que não é exibido na página ao carregá-la. - Método
document.importNode(template, true): clona o conteúdo do template. - Métodos
querySelectoretextContent: são usados para alterar o conteúdo do template clonado antes de inseri-lo no documento.
5.3 Vantagens da tag <template>
Melhoria de desempenho
Usar templates permite carregar previamente o código HTML que será usado mais tarde. Isso pode melhorar o desempenho da página, já que o conteúdo dos templates não é renderizado e não afeta o carregamento inicial da página.
Simplificação do conteúdo dinâmico
Templates simplificam a criação de conteúdo dinâmico. Em vez de criar código HTML programaticamente usando JavaScript, você pode simplesmente clonar e modificar templates previamente preparados.
Facilidade e legibilidade
Os templates fazem o código ser mais legível e estruturado, já que o código HTML para elementos repetitivos pode ser armazenado separadamente, em vez de ser embutido no JavaScript.
Exemplo com exibição condicional de conteúdo:
<h1>Resultados da operação</h1>
<div id="messageContainer"></div>
<template id="messageTemplate">
<div class="message">
<p class="content"></p>
</div>
</template>
document.addEventListener('DOMContentLoaded', () => {
// Pegamos as referências para os elementos no DOM
const messageContainer = document.getElementById('messageContainer'); // Contêiner para mensagens
const template = document.getElementById('messageTemplate').content; // Template da mensagem
// Função para exibir uma mensagem
function showMessage(type, text) {
// Clonamos o template da mensagem
const clone = document.importNode(template, true); // true - clonagem profunda
// Pegamos a referência para o elemento da mensagem dentro do clone
const messageDiv = clone.querySelector('.message');
// Adicionamos uma classe correspondente ao tipo de mensagem (success ou error)
messageDiv.classList.add(type);
// Definimos o texto da mensagem
messageDiv.querySelector('.content').textContent = text;
// Adicionamos a mensagem ao contêiner
messageContainer.appendChild(clone);
}
// Chamamos a função para exibir mensagens
showMessage('success', 'Operação foi realizada com sucesso!');
showMessage('error', 'Ocorreu um erro ao realizar a operação.');
});
Explicação:
- Função
showMessage(): aceita o tipo de mensagem (sucesso ou erro) e o texto da mensagem, clona o template e o adiciona ao contêiner de mensagens. - Classes
.successe.error: são aplicadas ao template clonado dependendo do tipo de mensagem para estilização.
GO TO FULL VERSION