Definição de Template HTML

Introdução

A tag <template> em HTML permite criar conteúdo reutilizável que não é renderizado em uma página quando ela é carregada. Isso é útil quando você tem conteúdo que não é necessário no início do carregamento da página, mas pode ser acessado posteriormente usando JavaScript. Este laboratório irá guiá-lo através dos passos para criar um template HTML.

Nota: Você pode praticar a codificação em index.html e aprender Como Escrever HTML no Visual Studio Code. Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Adicionar a Tag <template>

Primeiramente, crie um arquivo HTML chamado index.html.

Adicione a tag <template> ao seu arquivo HTML. Esta tag requer uma tag de início e fim e deve conter o conteúdo que você deseja reutilizar posteriormente.

<template id="myTemplate">
  <h2>This is a template</h2>
  <p>This is some text that can be reused.</p>
</template>

Nota: O atributo id pode ajudá-lo a referenciar o template posteriormente em JavaScript.

Criar uma Área de Placeholder (espaço reservado)

Crie uma área vazia onde você irá inserir o conteúdo do template. Para fazer isso, use a tag <div> e atribua a ela um atributo id.

<div id="placeholder"></div>

Usar JavaScript para Renderizar o Template

Adicione um bloco de código JavaScript ao seu arquivo HTML para renderizar o conteúdo do template na área de placeholder.

<script>
  const template = document.getElementById('myTemplate'); const placeholder =
  document.getElementById('placeholder'); const clone =
  template.content.cloneNode(true); placeholder.appendChild(clone);
</script>

Este código irá primeiro recuperar o template do HTML usando o método getElementById e, em seguida, criar um clone de seu conteúdo. O conteúdo é então anexado à área de placeholder.

Salve o arquivo index.html e abra-o em um navegador web. Você deverá ver o conteúdo do template aparecer na área de placeholder.

Resumo

Usar a tag HTML <template> é uma maneira simples e útil de criar conteúdo reutilizável em suas páginas web. Com a ajuda do JavaScript, você pode renderizar dinamicamente o conteúdo quando ele for necessário. Isso pode ajudar a reduzir a redundância em seu código e torná-lo mais fácil de manter.