HTML टेम्पलेट टैग
In this page:
<template id="id">
<!-- template content -->
</template>
<script>
const clone = document.getElementById("id").content.cloneNode(true);
</script>template एलिमेंट
template टैग HTML मार्कअप के एक ब्लॉक को परिभाषित करता है जो वेबपेज लोड होने पर निष्क्रिय (inert) और पूरी तरह छुपा हुआ रहता है। यह एक फिर से इस्तेमाल किए जाने योग्य टेम्पलेट कंटेनर की तरह काम करता है जिसे आप JavaScript का उपयोग करके डायनामिक रूप से कॉपी और इंस्टैंशिएट कर सकते हैं।
उदाहरण: The template Element
<template id="card-template">
<p>Card content</p>
</template>Template कंटेंट को क्लोन करना
अपने पेज पर template कंटेंट दिखाने के लिए, आप एक JavaScript स्क्रिप्ट लिखते हैं जो template की ID कैप्चर करती है, उसके content को एक्सेस करती है, cloneNode(true) का उपयोग करके उसका नोड स्ट्रक्चर क्लोन करती है, और उसे अपने पेज लेआउट में जोड़ देती है।
उदाहरण: Cloning Template Content
<template id="card-template">
<p>Card content</p>
</template>
<script>
const clone = document.getElementById('card-template').content.cloneNode(true);
document.body.appendChild(clone);
</script>Templates में डेटा इंजेक्ट करना
एक बार जब आप template कंटेंट क्लोन कर लेते हैं, तो आप अपने पेज लेआउट में क्लोन जोड़ने से पहले उसके अंदर के एलिमेंट्स (जैसे heading या paragraph टैग्स) को अपनी स्क्रिप्ट्स में आसानी से टार्गेट करके कस्टम डेटा वैल्यूज़ इंजेक्ट कर सकते हैं।
उदाहरण: Injecting Data into Templates
<template id="card-template">
<p class="name"></p>
</template>
<script>
const clone = document.getElementById('card-template').content.cloneNode(true);
clone.querySelector('.name').textContent = 'Alex';
document.body.appendChild(clone);
</script>template के परफॉर्मेंस फायदे
template एलिमेंट के आने से पहले, डेवलपर्स को लंबे, धीमे JavaScript लूप्स के अंदर मैनुअली एलिमेंट्स बनाकर या innerHTML स्ट्रिंग्स का उपयोग करके डायनामिक लेआउट्स बनाने पड़ते थे, जिससे ब्राउज़र्स को अपना लेआउट फिर से बनाना पड़ता था और पेज परफॉर्मेंस धीमी हो जाती थी।
Templates को ब्राउज़र एक बार पार्स करता है, जिससे इन्हें क्लोन करना बेहद तेज़ और कारगर होता है।
उदाहरण: Performance Benefits of template
<template id="row-template">
<li></li>
</template>
<script>
for (let i = 0; i < 100; i++) {
document.body.appendChild(document.getElementById('row-template').content.cloneNode(true));
}
</script>कंडीशनल लेआउट टॉगल्स
आप template टैग्स का उपयोग पूरे लेआउट सेक्शन्स (जैसे इंटरैक्टिव modal forms, warning notices, या tool panels) स्टोर करने के लिए कर सकते हैं जिन्हें आप सिर्फ तभी लोड करना चाहते हैं जब यूज़र कोई बटन क्लिक करे या कोई एक्शन ट्रिगर करे।
उदाहरण: Conditional Layout Toggles
<template id="modal-template">
<div class="modal">Warning notice</div>
</template>
<button onclick="document.body.appendChild(document.getElementById('modal-template').content.cloneNode(true))">
Show Warning
</button>- template code लिखना और cloning के बिना उसके page load पर display होने की उम्मीद करना।
- standard document.getElementById से template contents को target करने की कोशिश करना, जो null return करेगा।
- अपने cloned fragments को target करने के बजाय सीधे original template node में values update करना।
- template tag HTML markup का एक inert block define करता है जो page load पर hidden रहता है।
- अपने scripts में template ID capture करें और उसकी structure clone करने के लिए content.cloneNode(true) इस्तेमाल करें।
- अपनी site को fast और optimized रखने के लिए अपने cloned fragments को अपने webpage layout में append करने से पहले उनमें custom data inject करें।
standard HTML5 template elements सभी modern web browsers द्वारा natively supported हैं।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: