path: root/files/ru/web/html/element/template/index.html

---
title: '<template>: элемент шаблона контента'
slug: Web/HTML/Element/template
tags:
  - Элемент
  - HTML
  - HTML Веб-компоненты
  - HTML:Основной поток
  - HTML:Метаданные
  - HTML:Фразовый контент
  - HTML:Элементы поддержки скриптов
  - Справочник
  - Шаблон
  - Веб
  - Веб-компоненты
translation_of: Web/HTML/Element/template
browser-compat: html.elements.template
---
<div>{{HTMLRef}}</div>

<p><a href="/en-US/docs/Web/HTML">HTML</a>-элемент шаблона контента <strong><code>&lt;template&gt;</code></strong> — это механизм для отложенного создания клиентского контента, который не отображается во время загрузки страницы, но может быть инициализирован при помощи JavaScript.</p>

<p>Шаблон можно представить себе как фрагмент контента страницы, сохранённый для последующего использования в документе. Хотя парсер и обрабатывает содержимое элемента <strong><code>&lt;template&gt;</code></strong> во время загрузки страницы, он делает это, только чтобы убедиться в валидности содержимого, само содержимое при этом не отображается.</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th>
   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#метаданные">Метаданные</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#основной_поток">основной поток</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#phrasing_content">фразовый контент</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#элементы_поддержки_скриптов">элементы поддержки скриптов</a></td>
  </tr>
  <tr>
   <th scope="row">Допустимый контент</th>
   <td>Нет ограничений</td>
  </tr>
  <tr>
   <th scope="row">Закрывающий тег</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Разрешённые родители</th>
   <td>Любые элементы, которые могут содержать <a href="/ru/docs/Web/Guide/HTML/Content_categories#метаданные">метаданные</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#phrasing_content">фразовый контент</a> или <a href="/en-US/docs/Web/Guide/HTML/Content_categories#элементы_поддержки_скриптов">элементы поддержки скриптов</a>. Допускается вкладывать элемент в {{HTMLElement("colgroup")}}, у которого <em>отсутствует</em> атрибут {{htmlattrxref("span", "colgroup")}}.</td>
  </tr>
  <tr>
   <th scope="row">Неявные роли ARIA</th>
   <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">Нет соответствующей роли</a></td>
  </tr>
  <tr>
   <th scope="row">Разрешённые роли ARIA</th>
   <td>Отсутствует</td>
  </tr>
  <tr>
   <th scope="row">DOM интерфейс</th>
   <td>{{domxref("HTMLTemplateElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Attributes">Атрибуты</h2>

<p>Элемент может иметь <a href="/en-US/docs/Web/HTML/Global_attributes">общие атрибуты</a>.</p>

<p>Однако у <code>{{domxref("HTMLTemplateElement")}}</code> есть свойство <code>{{domxref("HTMLTemplateElement.content", "content")}}</code>, которое возвращает доступный только для чтения <code>{{domxref("DocumentFragment")}}</code>, содержащий DOM-поддерево шаблона. Обратите внимание, что прямое использование значения <code>{{domxref("HTMLTemplateElement.content", "content")}}</code> может привести к непредсказуемому поведению, см. раздел <a href="#avoiding_documentfragment_pitfall">ловушка <code>DocumentFragment</code></a> ниже.</p>

<h2 id="Examples">Примеры</h2>

<p>Начнём с HTML.</p>

<pre class="brush: html">&lt;table id="producttable"&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;td&gt;UPC_Code&lt;/td&gt;
      &lt;td&gt;Product_Name&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;!-- данные будут вставлены сюда --&gt;
  &lt;/tbody&gt;
&lt;/table&gt;

&lt;template id="productrow"&gt;
  &lt;tr&gt;
    &lt;td class="record"&gt;&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
  &lt;/tr&gt;
&lt;/template&gt;
</pre>

<p>Для начала у нас есть таблица, в которую мы собираемся вставить контент с помощью Javascript. За таблицей следует шаблон, который описывает структуру HTML-фрагмента — строку таблицы.</p>

<p>Теперь, когда таблица была создана, а шаблон определён, используем JavaScript, чтобы вставить строки в таблицу. Каждая строка будет строиться по шаблону.</p>

<pre class="brush:js;">// Убеждаемся, что браузер поддерживает тег &lt;template&gt;,
// проверив наличие атрибута content у элемента template.
if ('content' in document.createElement('template')) {

  // Находим элемент tbody таблицы
  // и шаблон строки
  var tbody = document.querySelector("tbody");
  var template = document.querySelector('#productrow');

  // Клонируем новую строку и вставляем её в таблицу
  var clone = template.content.cloneNode(true);
  var td = clone.querySelectorAll("td");
  td[0].textContent = "1235646565";
  td[1].textContent = "Stuff";

  tbody.appendChild(clone);

  // Клонируем новую строку ещё раз и вставляем её в таблицу
  var clone2 = template.content.cloneNode(true);
  td = clone2.querySelectorAll("td");
  td[0].textContent = "0384928528";
  td[1].textContent = "Acme Kidney Beans 2";

  tbody.appendChild(clone2);

} else {
  // Иной способ заполнить таблицу, потому что
  // HTML-элемент template не поддерживается.
}
</pre>

<p>Как результат имеем HTML-таблицу с двумя новыми строками, добавленными с помощью JavaScript:</p>

<div class="hidden">
<pre class="brush: css">table {
  background: #000;
}
table td {
  background: #fff;
}</pre>
</div>

<p>{{EmbedLiveSample("Examples", 500, 120)}}</p>

<h2 id="Avoiding_DocumentFragment_pitfall">Ловушка <code>DocumentFragment</code></h2>

<p>{{domxref("DocumentFragment")}} не подходит в качестве целевого объекта для многих событий, поэтому предпочтительнее клонировать или ссылаться на элементы внутри него.</p>

<p>Рассмотрим следующие HTML-разметку и JavaScript-код:</p>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;div id="container"&gt;&lt;/div&gt;

&lt;template id="template"&gt;
  &lt;div&gt;Click me&lt;/div&gt;
&lt;/template&gt;</pre>

<h3 id="JavaScript">JavaScript</h3>

<pre class="brush: js">const container = document.getElementById("container");
const template = document.getElementById("template");

function clickHandler(event) {
  event.target.append(" — Clicked this div");
}

const firstClone = template.content.cloneNode(true);
firstClone.addEventListener("click", clickHandler);
container.appendChild(firstClone);

const secondClone = template.content.firstElementChild.cloneNode(true);
secondClone.addEventListener("click", clickHandler);
container.appendChild(secondClone);</pre>

<h3 id="Result">Результат</h3>

<p>В переменной <code>firstClone</code> у нас экземпляр (клон) <code>DocumentFragment</code>, и хотя у нас получилось отрисовать его внутри контейнера, клик по нему не срабатывает. В переменной <code>secondClone</code> у нас экземпляр (клон) <code>{{domxref("HTMLDivElement")}}</code>, клик по которому работает как ожидается.</p>

<p>{{EmbedLiveSample('Avoiding_DocumentFragment_pitfall')}}</p>

<h2 id="Specifications">Спецификации</h2>

<p>{{Specifications}}</p>

<h2 id="Browser_compatibility">Совместимость с браузерами</h2>

<p>{{Compat}}</p>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
  <li>Веб-компоненты: {{HTMLElement("slot")}} (и устаревший: {{HTMLElement("shadow")}})</li>
  <li><a href="/en-US/docs/Web/Web_Components/Using_templates_and_slots">Использование шаблонов и слотов</a></li>
</ul>