<template>

Этот перевод не завершён. Пожалуйста, помогите перевести эту статью с английского

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

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

Категории контента Metadata content, flow content, phrasing content, script-supporting element
Допустимый контент Нет ограничений
Закрывающий тег Нет, открывающий и закрывающий теги обязательны.
Разрешенные родители Any element that accepts metadata content, phrasing content, or script-supporting elements. Also allowed as a child of a <colgroup> element that does not have a span attribute.
Неявные роли ARIA Нет соответствующей роли
Разрешенные роли ARIA Отсутствует
DOM интерфейс HTMLTemplateElement

Атрибуты

Элемент может иметь общие атрибуты.

Также есть доступный только для чтения атрибут content, который предоставляет доступ к содержимому шаблона. Проверка на наличие этого атрибута является распространённым способом определить, поддерживает ли браузер элемент <template>.

Примеры

Начнём с HTML.

<table id="producttable">
  <thead>
    <tr>
      <td>UPC_Code</td>
      <td>Product_Name</td>
    </tr>
  </thead>
  <tbody>
    <!-- existing data could optionally be included here -->
  </tbody>
</table>

<template id="productrow">
  <tr>
    <td class="record"></td>
    <td></td>
  </tr>
</template> 

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

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

// Проверяем поддерживает ли браузер тег <template>
// проверив наличие аттрибута content у элемента template
if ('content' in document.createElement('template')) {

  // Instantiate the table with the existing HTML tbody and the row with the template
  var t = document.querySelector('#productrow'),
  td = t.content.querySelectorAll("td");
  td[0].textContent = "1235646565";
  td[1].textContent = "Stuff";

  // клонируем новую строку и вставляем её в таблицу
  var tb = document.getElementsByTagName("tbody");
  var clone = document.importNode(t.content, true);
  tb[0].appendChild(clone);
  
  // создаём новую строку
  td[0].textContent = "0384928528";
  td[1].textContent = "Acme Kidney Beans";

 // клонируем новую строку и вставляем её в таблицу
  var clone2 = document.importNode(t.content, true);
  tb[0].appendChild(clone2);

} else {
  // необходимо найти другой способ добавить строку в таблицу т.к.
  // тег <template> не поддерживатся браузером
}

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

Спецификации

Спецификация Статус Комментарий
HTML Living Standard
Определение 'template element' в этой спецификации.
Живой стандарт No change
HTML5
Определение 'template element' в этой спецификации.
Рекомендация Initial definition

Совместимость браузера

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
templateChrome Полная поддержка 26Edge Полная поддержка 13Firefox Полная поддержка 22IE Нет поддержки НетOpera Полная поддержка 15Safari Полная поддержка 8WebView Android Полная поддержка ДаChrome Android Полная поддержка 26Firefox Android Полная поддержка 22Opera Android ? Safari iOS Полная поддержка 8Samsung Internet Android Полная поддержка 1.5

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Совместимость неизвестна  
Совместимость неизвестна

Смотрите также