HTML Template Tag
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>Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: