HTML таг template

Пример

Кратък пример как се използва тагът <template>.

<button id="addUser" class="btn btn-sm btn-primary mb-3">Добави потребител</button>

<ul id="userList" class="list-group mb-3"></ul>

<template id="userItemTemplate">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    <span class="user-name">Име на потребител</span>
    <span class="badge bg-secondary rounded-pill user-role">Роля</span>
  </li>
</template>

<script>
  const btn = document.getElementById('addUser');
  const list = document.getElementById('userList');
  const template = document.getElementById('userItemTemplate');

  let counter = 1;

  btn.addEventListener('click', () => {
    const clone = template.content.cloneNode(true);
    clone.querySelector('.user-name').textContent = 'Потребител ' + counter;
    clone.querySelector('.user-role').textContent = counter % 2 === 0 ? 'Admin' : 'User';
    list.appendChild(clone);
    counter++;
  });
</script>

Дефиниция и употреба

Виж как се ползва тагът <template>.

Елементът <template> дефинира HTML шаблон, който не се визуализира директно в страницата. Съдържанието му е „инертно“ – не се изпълнява JavaScript, не се зареждат изображения и не се прилагат стилове, докато не бъде изрично клонирано и добавено към DOM чрез JavaScript.

Обичайният начин на работа е:

• В HTML се описва повтаряща се структура (карта, ред в таблица, елемент от списък и др.) вътре в <template>.
• На шаблона се задава id, за да бъде достъпен от JavaScript.
• В JavaScript се взема template.content, клонира се с cloneNode(true) и се попълват динамични данни (текст, атрибути, класове).
• Накрая клонираният фрагмент се вмъква в реалния DOM (например с appendChild, prepend, replaceChildren и др.).

<template> е особено полезен при:

• динамично генериране на списъци, таблици и карти от данни (JSON, API отговори и др.);
• компонентно мислене без нужда от външни библиотеки – всеки шаблон описва малък „компонент“;
• избягване на конкатенация на HTML низове в JavaScript и по-четим код;
• предварително дефинирани модални прозорци, нотификации, елементи на интерфейса, които се показват само при нужда.

Самият елемент <template> не се показва в изгледа и не заема място в оформлението. Браузърът го третира като контейнер за съдържание, което ще бъде използвано по-късно. Вътре в него може да има произволен валиден HTML, включително други шаблони.

Browser Support

Browser	Поддръжка
Chrome	✔️
Firefox	✔️
Edge	✔️
Safari	✔️
Opera	✔️

Атрибути