HTML <template>Тег


Примеры

При использовании тега <template> содержимое в теге не будет отображаться при загрузке страницы; после загрузки вы можете использовать JavaScript, чтобы отобразить его:

<button onclick="showContent()">Показать скрытое содержимое</button> <template> <h2>logo</h2> <img src="/static.jyshare.com/images/example-logo.png" > </template> <script> function showContent() { var temp = document.getElementsByTagName("template")[0]; var clon = temp.content.cloneNode(true); document.body.appendChild(clon); } </script>

Попробуйте сами »

Поддержка браузеров

Числа в таблице указывают первую версию браузера, которая полностью поддерживает этот элемент.

Элемент
<template> 26.0 13.0 22.0 8.0 15.0

Определение и использование

Тег <template> определяет содержимое, которое скрыто при загрузке страницы. Содержимое внутри тега можно отобразить позже с помощью JavaScript.

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

Другие примеры

Пример

Каждый элемент массива в примере использует новый элемент div для заполнения веб-страницы. HTML-код для каждого элемента div находится внутри элемента template:

<template> <div class="myClass">Мне нравится:</div> </template> <script> var myArr = ["Google", "Example", "Taobao", "Wiki", "Zhihu", "Baidu"]; function showContent() { var temp, item, a, i; temp = document.getElementsByTagName("template")[0]; item = temp.content.querySelector("div"); for (i = 0; i < myArr.length; i++) { a = document.importNode(item, true); a.textContent += myArr[i]; document.body.appendChild(a); } } </script>

Попробуйте сами »

Пример

Проверьте, поддерживает ли браузер тег template:

if (document.createElement("template").content) { document.write("Ваш браузер поддерживает тег template!"); } else { document.write("Ваш браузер не поддерживает тег template!"); }

Попробуйте сами »

Глобальные атрибуты

Тег <time> поддерживаетглобальные атрибуты HTML。

Другие расширения