HTML тег <template>

❮ Назад Вперед ❯

Элемент <template> используется для хранения шаблонов HTML кода, которые можно клонировать и вставлять в документ с помощью скриптов. Обычно используется для элементов с повторяющейся структурой, вроде списков, таблиц и т.д.

Отличие тега <template> от обычных тегов заключается в том, что его содержимое обрабатывается особым образом. Фрагменты кода хранятся на стороне клиента и не отображаются во время загрузки страницы. Для того, чтобы активировать содержимое тега и вставить его в код документа, необходимо использовать скрипты.

Браузер обрабатывает содержимое тега, чтобы убедиться в валидности кода.

Тег <template> может быть расположен практически в любом месте HTML-документа, в тегах <head>, <body> или <frameset>, и может содержать контент, который допускается в этих тегах.

Синтаксис

Тег <template> парный, содержимое пишется между открывающим (<template>) и закрывающим (</template>) тегами.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <template id="myTemplate">
      <p>Содержимое шаблона</p>
    </template>
    <div id="normalContent">
      <p>Обычный параграф.</p>
    </div>
    <!-- функция JavaScript: Клонирует template и добавляет в обычный контент -->
    <button onclick="useTemplate();">Показать содержимое</button>
    <script>
      function useTemplate() {
      var myTemplate = document.getElementById('myTemplate');
          normalContent = document.getElementById('normalContent');
          clonedTemplate = myTemplate.content.cloneNode(true);
          normalContent.appendChild(clonedTemplate);
          }
    </script>
  </body>
</html>