एचटीएमएल <टेम्पलेट> टैग
उदाहरण
कुछ सामग्री को रखने के लिए <टेम्पलेट> का उपयोग करें जो पृष्ठ लोड होने पर छिपी रहेंगी। इसे प्रदर्शित करने के लिए जावास्क्रिप्ट का प्रयोग करें:
<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() {
var temp =
document.getElementsByTagName("template")[0];
var clon =
temp.content.cloneNode(true);
document.body.appendChild(clon);
}
</script>
नीचे और अधिक "इसे स्वयं आज़माएं" उदाहरण।
परिभाषा और उपयोग
टैग का <template>उपयोग कंटेनर के रूप में पृष्ठ लोड होने पर उपयोगकर्ता से छिपी कुछ HTML सामग्री को रखने के लिए किया जाता है।
अंदर की सामग्री को <template>बाद में जावास्क्रिप्ट के साथ प्रस्तुत किया जा सकता है।
आप टैग का उपयोग कर सकते हैं <template>यदि आपके पास कुछ HTML कोड है जिसे आप बार-बार उपयोग करना चाहते हैं, लेकिन तब तक नहीं जब तक आप इसके लिए नहीं पूछते। टैग के बिना ऐसा करने के <template>लिए, आपको ब्राउज़र को कोड प्रस्तुत करने से रोकने के लिए जावास्क्रिप्ट के साथ HTML कोड बनाना होगा।
ब्राउज़र समर्थन
| Element | |||||
|---|---|---|---|---|---|
| <template> | 26.0 | 13.0 | 22.0 | 8.0 | 15.0 |
वैश्विक गुण
<template>टैग HTML में वैश्विक विशेषताओं का समर्थन करता है ।
और ज्यादा उदाहरण
उदाहरण
एक सरणी में प्रत्येक आइटम के लिए वेब पेज को एक नए div तत्व से भरें। प्रत्येक div तत्व का HTML कोड टेम्पलेट तत्व के अंदर होता है:
<template>
<div class="myClass">I like: </div>
</template>
<script>
var myArr = ["Audi", "BMW", "Ford", "Honda", "Jaguar",
"Nissan"];
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>
उदाहरण
<टेम्पलेट> के लिए ब्राउज़र समर्थन जांचें:
<script>
if (document.createElement("template").content) {
document.write("Your browser supports template!");
} else {
document.write("Your browser does not supports template!");
}
</script>