<template> - HTML-елемент для шаблонів

HTML-елемент <template> — це механізм для зберігання HTML-коду на стороні клієнта, який не відображається під час завантаження сторінки, але може бути створений та вставлений у документ за допомогою JavaScript.

Вміст елемента <template> є інертним. Скрипти в ньому не виконуються, зображення не завантажуються, а стилі не застосовуються доти, доки шаблон не буде активовано. Це робить його ідеальним інструментом для створення повторюваних структур DOM, які можна динамічно додавати на сторінку.

Доступ до вмісту шаблону здійснюється через його властивість .content, яка повертає DocumentFragment. Цей фрагмент можна клонувати та вставляти в будь-яке місце документа.

<template>
  <p>Це прихований вміст.</p>
</template>

<button id="show-template">Показати вміст шаблону</button>
<div id="container"></div>

<template id="my-template">
  <p>Це вміст із шаблону!</p>
</template>

const showButton = document.getElementById('show-template');
const template = document.getElementById('my-template');
const container = document.getElementById('container');

showButton.addEventListener('click', () => {
  const templateContent = template.content.cloneNode(true);
  container.appendChild(templateContent);
});

template {
  display: none;
}