![]() |
Definition and UsageThe The content inside You can use the Browser SupportGlobal AttributesThe |
Example:
HTML
<button onclick="showContent()">Show hidden content</button>
<template>
<h2>Flower</h2>
<img src="img_white_flower.jpg" width="214" height="204">
</template>
<script>
function showContent() {
let temp = document.getElementsByTagName("template")[0];
let clon = temp.content.cloneNode(true);
document.body.appendChild(clon);
}
</script>
Fill the web page with one new div element for each item in an array. The HTML code of each div element is inside the template element.
Example:
HTML
<template>
<div class="myClass">I like: </div>
</template>
<script>
let myArr = ["Audi", "BMW", "Ford", "Honda", "Jaguar", "Nissan"];
function showContent() {
let 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>
Test template Support
Example:
HTML
<script>
if (document.createElement("template").content) {
document.write("Your browser supports template!");
} else {
document.write("Your browser does not supports template!");
}
</script>
html template |
How to create HTML <template> Tag | HTML Tag |
How to fill the web page with one new div element on HTML <template> Tag | HTML Tag |
How to check browser support for <template> | HTML Tag |
Read Full: | HTML Tag |
Type: | Develop |
Category: | Web Tutorial |
Sub Category: | HTML Tag |
Uploaded: | 3 weeks ago |
Uploaded by: | Admin |
Views: | 63 |
Reffered: https://www.w3schools.com/tags/tag_template.asp