Template

O elemento <template> define fragmentos de HTML que não são renderizados até serem clonados via JavaScript.

Principais Características

  • •O conteúdo dentro do template não é renderizado até ser clonado
  • •Permite criar estruturas HTML que podem ser clonadas múltiplas vezes
  • •Elementos dentro do template não carregam recursos (imagens, scripts) até serem usados
  • •Mantém o HTML organizado separando estrutura de conteúdo dinâmico

Métodos e Propriedades

template.content

Retorna um DocumentFragment com o conteúdo do template para clonagem

cloneNode(true)

Cria uma cópia profunda do conteúdo do template para inserção no DOM

Como Funciona

O elemento <template> armazena conteúdo HTML que não é exibido na página. Para usar o conteúdo, você precisa cloná-lo e inserí-lo no DOM via JavaScript.

Conteúdo inerte

Scripts não executam, imagens não carregam, estilos não aplicam até o template ser clonado e inserido no documento.

Casos de uso

Ideal para listas dinâmicas, cards repetitivos, linhas de tabela e qualquer conteúdo que precisa ser criado múltiplas vezes.

Código

import { useRef } from "react";

export default function TemplateExample() {
  const templateRef = useRef<HTMLTemplateElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);

  const addCard = () => {
    if (!templateRef.current || !containerRef.current) return;
    
    const clone = templateRef.current.content.cloneNode(true);
    containerRef.current.appendChild(clone);
  };

  return (
    <div>
      <template ref={templateRef}>
        <div className="card">
          <h3>Novo Card</h3>
          <p>Este card foi criado a partir de um template.</p>
        </div>
      </template>

      <button onClick={addCard}>Adicionar Card</button>
      
      <div ref={containerRef} className="cards-container" />
    </div>
  );
}

Demonstração

Clique no botão para criar novos cards a partir do template. O conteúdo do template é clonado e inserido no DOM dinamicamente.

Cards criados: 0