HTML <template> टैग

  • पिछला पृष्ठ <td>
  • अगला पृष्ठ <textarea>

वर्णन और उपयोग

<template> टैग को कंटेनर के रूप में उपयोग किया जाता है, जिसके द्वारा पृष्ठ लोड होने पर उपयोगकर्ता से HTML सामग्री को छिपा दिया जाता है।

<template> आंतरिक सामग्री को बाद में JavaScript के द्वारा प्रदर्शित कर सकते हैं।

यदि आपके पास कुछ दोहरा उपयोग के लिए HTML कोड है, लेकिन जब जब दिखाना होगा, तो आपको <template> टैग. <template> टैग, आपको JavaScript का उपयोग करके HTML कोड को बनाना होगा ताकि ब्राउज़र इसे प्रदर्शित न करे।

इन्स्टांस

उदाहरण 1

उपयोग करें <template> साथ ही एक सामग्री को सहेजें जो पृष्ठ लोड होने पर छिपा होगा और इसे JavaScript के द्वारा दिखाएं:

<button onclick="शोवहिडनकंटेंट()">छिपा हुआ सामग्री दिखाएं</button>
<template>
  <h2>फ़्लावर</h2>
  <img src="img_white_flower.jpg" width="214" height="204">
</template>
<script>
फ़ंक्शन शोवकंटेंट() {
  वार टेम्प = डॉक्युमेंट.गेटब्यॅग्स("template")[0];
  वार क्लोन = टेम्प.कंटेंट.क्लोननोड(ट्रू);
  डॉक्युमेंट.बॉडी.अपेंडचाइल(क्लोन);
}
</script>

अपने आप से प्रयोग करें

उदाहरण 2

एक नए div एलीमेंट का उपयोग करके आयता में हर एक आयत को भरें। हर div एलीमेंट का HTML कोड template एलीमेंट में है:

<template>
  <div class="माईक्लास">मैं पसंद करता हूँ: </div>
</template>
<script>
वार माईएआर = ["ऑटो", "बीएएम", "फ़ोर्ड", "होन्डा", "जैगुआर", "निसान"];
फ़ंक्शन शोवकंटेंट() {
  वार टेम्प, इटम, ए, आई;
  टेम्प = डॉक्युमेंट.गेटब्यॅग्स("template")[0];
  इटम = टेम्प.कंटेंट.क्वेरीसेलेक्टर("div");
  फ़ोर (आई = 0; आई < माईएआर.लैंग्थ; आई++) {
    a = डॉक्युमेंट.इम्पोर्टनोड(इटम, ट्रू);
    a.textContent += myArr[i];
    document.body.appendChild(a);
  }
}
</script>

अपने आप से प्रयोग करें

उदाहरण 3

ब्राउज़र को जाँच करें <template> समर्थन:

<script>
if (document.createElement("template").content) {
  document.write("Your browser supports template!");
} else {
  document.write("Your browser does not supports template!");
}
</script>

अपने आप से प्रयोग करें

वैश्विक गुण

<template> टैग इसके अलावा यह समर्थन भी करते हैं HTML में वैश्विक गुण。

ब्राउज़र समर्थन

तालिका में दिए गए नंबर इस गुण को पूरी तरह से समर्थन देने वाले पहले ब्राउज़र का संस्करण को सूचित करते हैं。

च्रोम एज फायरफॉक्स सफारी ओपेरा
च्रोम एज फायरफॉक्स सफारी ओपेरा
26.0 13.0 22.0 8.0 15.0
  • पिछला पृष्ठ <td>
  • अगला पृष्ठ <textarea>