JavaScript रेंडरिंग के साथ template का उपयोग
गतिशील सूचियों के लिए टेम्पलेट को JavaScript लूप के साथ मिलाएँ
JavaScript रेंडरिंग के साथ template का उपयोग, CoddyKit पर HTML Academy का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह HTML Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
template तत्व
<template> तत्व ऐसे HTML को रखता है जिसे JavaScript द्वारा प्रतिलिपि बनाकर जोड़ने तक प्रदर्शित नहीं किया जाता। इसकी सामग्री निष्क्रिय होती है — template सक्रिय होने तक स्क्रिप्ट नहीं चलतीं, छवियाँ लोड नहीं होतीं और शैलियाँ लागू नहीं होतीं।
template की सामग्री तक पहुँचना
template की सामग्री template.content में एक DocumentFragment के रूप में रहती है। इसका उपयोग करने के लिए फ़्रैगमेंट की प्रतिलिपि बनाएँ: const clone = template.content.cloneNode(true)। true तर्क सभी वंशज नोड सहित गहरी प्रतिलिपि बनाता है।
template की प्रतिलिपियाँ प्रदर्शित करना
जोड़ने से पहले प्रतिलिपि को अनुकूलित करें: प्रतिलिपि के अंदर खोजें, पाठ सामग्री निर्धारित करें और इवेंट श्रोता जोड़ें। फिर इसे DOM में जोड़ें: container.appendChild(clone)। प्रत्येक cloneNode() एक स्वतंत्र प्रतिलिपि बनाता है — एक को संशोधित करने से अन्य प्रभावित नहीं होतीं।
const tmpl = document.getElementById("card-template");
function renderCard(data) {
const clone = tmpl.content.cloneNode(true);
clone.querySelector(".title").textContent = data.title;
clone.querySelector(".body").textContent = data.body;
container.appendChild(clone);
}template से सूचियाँ प्रदर्शित करना
सूचियाँ प्रदर्शित करने के लिए template को Array.forEach या Array.map के साथ मिलाएँ: data में मौजूद प्रत्येक आइटम के लिए template की प्रतिलिपि बनाएँ, मान भरें और उसे सूची के कंटेनर में जोड़ें। यह तरीका ढाँचे जैसा है, लेकिन मानक HTML और JavaScript पर आधारित है।
तालिका की पंक्तियों के लिए template
एक <template> परिभाषित करें जिसमें सेल सहित <tr> हो। प्रत्येक डेटा पंक्ति के लिए इसकी प्रतिलिपि बनाएँ और सामग्री भरें। इससे HTML बनाने के लिए स्ट्रिंग जोड़ने की आवश्यकता नहीं रहती — किसी एस्केपिंग की जरूरत नहीं, क्योंकि आप innerHTML के बजाय textContent निर्धारित करते हैं।
template का सक्रियण स्पष्ट होता है
template कभी अपने-आप प्रदर्शित नहीं होते। इससे ऐसे फ़्रैगमेंट संग्रहित करना सुरक्षित हो जाता है जिन्हें शर्त के आधार पर प्रदर्शित किया जाएगा: खोज का परिणाम खाली होने पर ही "कोई परिणाम नहीं" template दिखाएँ, नेटवर्क विफलता पर ही त्रुटि template दिखाएँ और डेटा प्राप्त करते समय लोड होने वाला ढाँचा दिखाएँ।
अंतर्निहित template
एक template में अन्य template हो सकते हैं — अंतर्निहित template बाहरी template के DocumentFragment के अंदर निष्क्रिय रहते हैं। इससे कॉम्पोनेंट जैसे पदानुक्रम बनाए जा सकते हैं, जहाँ बाहरी template की प्रतिलिपि बनाकर आवश्यकता के अनुसार अंदरूनी template सक्रिय किए जाते हैं।
template में सीमित शैलियाँ
template के <style> टैग के अंदर की शैलियाँ दस्तावेज़ पर लागू नहीं होतीं — template का उदाहरण बनाए जाने और उसकी सामग्री को सक्रिय DOM में ले जाए जाने तक वे निष्क्रिय रहती हैं। इससे template पृष्ठ को प्रभावित किए बिना अपनी शैलियाँ साथ रख सकते हैं।
template बनाम innerHTML
innerHTML का पार्सिंग समकालिक HTML स्ट्रिंग प्रसंस्करण है — हर बार HTML को फिर से पार्स किया जाता है। template.cloneNode() पहले से पार्स किए गए ट्री की प्रतिलिपि बनाता है। एक ही संरचना को बार-बार प्रदर्शित करने के लिए template की प्रतिलिपि बनाना अधिक तेज़ है और स्ट्रिंग जोड़ने से होने वाले XSS जोखिमों से बचाता है।
डेटा बाइंडिंग की सीमाएँ
template तत्व में अंतर्निहित डेटा बाइंडिंग नहीं होती — आपको हर प्रतिलिपि में मैन्युअल रूप से खोजकर सामग्री भरनी पड़ती है। जटिल डेटा बाइंडिंग की आवश्यकताओं के लिए कोई ढाँचा या लाइब्रेरी अधिक उपयुक्त है। template, ढाँचे के अतिरिक्त बोझ के बिना सरल और मैन्युअल प्रदर्शन के तरीकों के लिए होते हैं।
ब्राउज़र समर्थन
template तत्व सभी आधुनिक ब्राउज़र में समर्थित है (IE11 में आंशिक समर्थन था)। IE समर्थन की आवश्यकता वाले वातावरण में, प्रारंभ करते समय template की सामग्री को पार्स करके पॉलीफ़िल करें। आधुनिक प्रोजेक्ट में template का उपयोग बिना पॉलीफ़िल के करें।
ज्ञान जाँच
बार-बार प्रदर्शित करने के लिए innerHTML की तुलना में template.content.cloneNode(true) को प्राथमिकता क्यों दी जाती है?
सारांश
template तत्व निष्क्रिय, पहले से पार्स किए गए HTML फ़्रैगमेंट रखता है। template.content की प्रतिलिपि बनाने से मैन्युअल डेटा बाइंडिंग के लिए स्वतंत्र उदाहरण बनते हैं। textContent निर्धारित करने के साथ मिलकर template, XSS के बिना ढाँचे जैसे सूची प्रदर्शन, शर्त-आधारित UI और पुन: उपयोग योग्य HTML तरीकों को केवल मानक ब्राउज़र API से सक्षम करते हैं।
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 40
- पाठ
- 159
अक्सर पूछे जाने वाले प्रश्न
क्या “JavaScript रेंडरिंग के साथ template का उपयोग” पाठ निःशुल्क है?
हाँ — HTML Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “JavaScript रेंडरिंग के साथ template का उपयोग” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“JavaScript रेंडरिंग के साथ template का उपयोग” में मैं क्या सीखूँगा?
गतिशील सूचियों के लिए टेम्पलेट को JavaScript लूप के साथ मिलाएँ आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ HTML Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या HTML Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर HTML Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।
“JavaScript रेंडरिंग के साथ template का उपयोग” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस HTML Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर HTML Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- template एलिमेंट: निष्क्रिय सामग्री
- cloneNode से टेम्पलेट क्लोन करना
- JavaScript रेंडरिंग के साथ template का उपयोग
- टेम्पलेट बनाम innerHTML सुरक्षा