HTML <template>Tag
Examples
Using the <template> tag, the content in the tag will not be displayed when the page loads; after loading, you can use JavaScript to display it:
<button onclick="showContent()">Display hidden content</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>
Try it Yourself »
Browser Support
The numbers in the table specify the first browser version that fully supports the element.
| Element | |||||
|---|---|---|---|---|---|
| <template> | 26.0 | 13.0 | 22.0 | 8.0 | 15.0 |
Definition and Usage
The <template> tag defines content that is hidden when the page loads. The content inside the tag can be rendered later using JavaScript.
If you have some HTML code that needs to be reused, then you can use<template>set it as a common template.
More Examples
Example
Each array element in the example uses a new div element to fill the webpage. The HTML code for each div element is inside the template element:
<template>
<div class="myClass">I like:</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>
Try it Yourself »
Example
Check whether the browser supports the template tag:
if (document.createElement("template").content) {
document.write("Your browser supports the template tag!");
} else {
document.write("Your browser does not support the template tag!");
}
Try it Yourself »
Global Attributes
The <time> tag supportsHTML's global attributes。
Other Extensions