Template html что это

Содержимое — это шаблон для фрагмента HTML, который может быть клонирован и вставлен в документ через скрипты. Обычно применяется для элементов с повторяющейся структурой, вроде списков, таблиц, списков и др.

Поддержка браузерами¶

Can I Use template? Data on support for the template feature across the major browsers from caniuse.com.

Синтаксис¶

Внутри располагаются пустые элементы, образующие требуемый шаблон. Повторение этих элементов и их заполнение содержимым берут на себя скрипты.

Закрывающий тег обязателен.

Атрибуты¶

Для этого элемента доступны универсальные атрибуты.

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

Описание и примеры¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107

 html> head> meta charset="utf-8" /> title>templatetitle> style> table  width: 100%; border-collapse: collapse; > td, th  padding: 4px; border: 1px solid #333; > style> head> body> table> thead> tr> th>Твёрдость по Моосуth> th>Эталонный минералth> th>Обрабатываемостьth> tr> thead> tbody> template id="row"> tr> td>td> td>td> td>td>tr >template> tbody> table> script> var data = [  hardness: 1, mineral: 'Тальк', workability: 'Царапается ногтём', >,  hardness: 2, mineral: 'Гипс', workability: 'Царапается ногтём', >,  hardness: 3, mineral: 'Кальцит', workability: 'Царапается медью', >,  hardness: 4, mineral: 'Флюорит', workability: 'Легко царапается ножом, оконным стеклом', >,  hardness: 5, mineral: 'Апатит', workability: 'С усилием царапается ножом, оконным стеклом', >,  hardness: 6, mineral: 'Ортоклаз', workability: 'Царапает стекло. Обрабатывается напильником', >,  hardness: 7, mineral: 'Кварц', workability: 'Поддаётся обработке алмазом, царапает стекло', >,  hardness: 8, mineral: 'Топаз', workability: 'Поддаётся обработке алмазом, царапает стекло', >,  hardness: 9, mineral: 'Корунд', workability: 'Поддаётся обработке алмазом, царапает стекло', >,  hardness: 10, mineral: 'Алмаз', workability: 'Царапает стекло', >, ] var template = document.querySelector('#row') for (var i = 0; i  data.length; i++)  var mohs = data[i] var clone = template.content.cloneNode(true) var cells = clone.querySelectorAll('td') cells[0].textContent = mohs.hardness cells[1].textContent = mohs.mineral cells[2].textContent = mohs.workability template.parentNode.appendChild(clone) > script> body> html> 

Источник

: элемент шаблона контента

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

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

Атрибуты

Однако у HTMLTemplateElement (en-US) есть свойство content (en-US) , которое возвращает доступный только для чтения DocumentFragment , содержащий DOM-поддерево шаблона. Обратите внимание, что прямое использование значения content (en-US) может привести к непредсказуемому поведению, см. раздел ловушка DocumentFragment ниже.

Примеры

table id="producttable"> thead> tr> td>UPC_Codetd> td>Product_Nametd> tr> thead> tbody> tbody> table> template id="productrow"> tr> td class="record">td> td>td> tr> template> 

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

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

// Убеждаемся, что браузер поддерживает тег , // проверив наличие атрибута 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 не поддерживается. > 

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

table  background: #000; > table td  background: #fff; > 

Ловушка DocumentFragment

DocumentFragment не подходит в качестве целевого объекта для многих событий, поэтому предпочтительнее клонировать или ссылаться на элементы внутри него.

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

HTML

div id="container">div> template id="template"> div>Click mediv> template> 

JavaScript

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); 

Результат

В переменной firstClone у нас экземпляр (клон) DocumentFragment , и хотя у нас получилось отрисовать его внутри контейнера, клик по нему не срабатывает. В переменной secondClone у нас экземпляр (клон) HTMLDivElement , клик по которому работает как ожидается.

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

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

BCD tables only load in the browser

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

Found a content problem with this page?

This page was last modified on 21 июн. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Template html что это

Скрытая разметка для использования в качестве шаблона.

Время чтения: меньше 5 мин

Обновлено 8 сентября 2022

Кратко

Скопировать ссылку «Кратко» Скопировано

Тег – (от английского template – шаблон) используется как контейнер для хранения HTML-кода для дальнейшего использования в JavaScript.

Пример

Скопировать ссылку «Пример» Скопировано

 template> div class="card"> h2 class="card__title">h2> div class="card__content">div> div> template>    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку «Как понять» Скопировано

В может храниться любая корректная HTML-разметка, в том числе стили и скрипты. Браузер будет проверять HTML-синтаксис, но содержимое тега не будет отображаться на странице.

Если в шаблоне содержатся скрипты, они не выполнятся, а стили не применятся, пока содержимое шаблона не поместить на страницу.

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

Атрибуты

Скопировать ссылку «Атрибуты» Скопировано

Как использовать

Скопировать ссылку «Как использовать» Скопировано

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

Хотя большинство современных браузеров имеют поддержку , перед его использованием в скрипте это лучше проверить. Проверка осуществляется как раз по наличию свойства content .

 if (document.createElement('template').content)  /* Код выполнится, если браузер поддерживает */> else  /* Нужно придумать что-то другое */> if (document.createElement('template').content)  /* Код выполнится, если браузер поддерживает */ > else  /* Нужно придумать что-то другое */ >    Скопировать Скопировано Не удалось скопировать   

Наглядный пример

Скопировать ссылку «Наглядный пример» Скопировано

Имеем HTML-разметку с контейнером для списка покупок и шаблон элемента списка, завёрнутого в :

   
Список покупок  div> h2>Список покупокh2> ul class="list"> ul> template id="template"> li>li> template> div>    Скопировать Скопировано Не удалось скопировать   

Использование шаблона с помощью JavaScript:

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 В могут находиться даже те теги, которые в обычной жизни не используются без родительского контейнера, такие как или .

 template> li>li> template> template> tr> td>td> tr> template>    Скопировать Скопировано Не удалось скопировать   

Источник