jQuery html() मेथड का उपयोग कैसे करें

jQuery में डेवलपर्स को कुशलतापूर्वक डायनामिक वेब अनुभव बनाने में मदद करने के लिए कई मेथड्स उपलब्ध हैं। jQuery html() मेथड चयनित एलिमेंट के अंदर के सभी HTML को बदल देता है। यह उपयोगी है यदि आप पेज के साथ इंटरैक्ट करने के बाद उपयोगकर्ता जो देख रहा है उसे डायनामिकली बदलना चाहते हैं।

इस गाइड में हम html() का उपयोग कैसे करें और इसके सिंटैक्स के बारे में जानेंगे। हम html() का उपयोग करने के चरण-दर-चरण दृष्टिकोण पर भी एक नज़र डालेंगे। jQuery html() jQuery लाइब्रेरी में एक मौलिक मेथड है और अक्सर उपयोग किया जाता है। मूल बातें सीखने के बाद, आप html() का उपयोग करने का अभ्यास शुरू करने के लिए तैयार होंगे।

jQuery html() क्या है?

jQuery html() मेल खाने वाले एलिमेंट्स के सेट में प्रत्येक एलिमेंट की HTML सामग्री को सेट करता है। केवल वांछित HTML को बदलने के लिए पर्याप्त विशिष्ट क्वेरी प्रदान करने के लिए सावधानी बरतनी चाहिए।

html() के साथ केवल सामग्री बदलती है। यदि स्टाइलशीट है, तो नई सामग्री को पिछली सामग्री के समान ही स्टाइल किया जाएगा। यह उल्लेखनीय है कि html() केवल HTML डॉक्यूमेंट पर काम करता है - यह XML के साथ काम नहीं करता।

html() jQuery सिंटैक्स

याद रखें कि jQuery मेथड्स पहले एक सिलेक्टर पर कॉल किए जाते हैं। सिलेक्टर <p> टैग जितना व्यापक या <div> जितना विशिष्ट हो सकता है जिसमें एक आईडी हो (<div id='main-app'></div>)। एक बार वांछित एलिमेंट चुने जाने के बाद, हम html() को कॉल कर सकते हैं और html() के पैरामीटर के रूप में एक HTML स्ट्रिंग पास कर सकते हैं। CSS सिलेक्टर्स की गहन व्याख्या के लिए, हमारी गाइड देखें।

html() या तो पैरामीटर के रूप में स्ट्रिंग लिटरल या स्ट्रिंग वाले वेरिएबल को स्वीकार करता है। "New Content" का स्ट्रिंग लिटरल पास करने से वही रेंडर होगा जो "New Content" को संदर्भित करने वाले वेरिएबल को पास करने से होगा।

मान लीजिए हमारे पास यह सरल <div> है:

<div class='main-content> <p class='paragraphOne'> Hello World </p> </div>

हम पूरे <p> टैग को बदल सकते हैं:

$('div.main-content').html('<p>New Content</p>')

उपरोक्त कोड नए HTML को इस तरह रेंडर करता है:

<div class='main-content> <p>New Content </p> </div>

यदि मूल <p> टैग से जुड़ी स्टाइलिंग थी, तो यह नई सामग्री के साथ सक्रिय नहीं रहेगी। साधारण स्ट्रिंग पास करना भी संभव है:

$('div.main-content').html('New Content')

हमारा HTML अब इस प्रकार है:

<div class='main-content> New Content </div>

हम नई सामग्री में कुछ अंतर देख सकते हैं। स्ट्रिंग लिटरल पास करना पिछली सामग्री की स्टाइलिंग को बनाए रखने का एक शानदार तरीका है। याद रखें, स्ट्रिंग लिटरल केवल वर्णों वाला एक स्ट्रिंग है। यदि नई सामग्री को चाइल्ड एलिमेंट होने की आवश्यकता है, तो HTML स्ट्रिंग का उपयोग करना इसे पूरा करता है।

अब जब बुनियादी सिंटैक्स कवर हो गया है, आइए एक उदाहरण देखते हैं।

html() jQuery उदाहरण

हमने देखा कि html() हमारे उपरोक्त "New Content" उदाहरण में चयनित एलिमेंट के अंदर की सामग्री को कैसे बदलता है। यह स्ट्रिंग लिटरल या HTML स्ट्रिंग को पैरामीटर के रूप में पास करके पूरा किया जा सकता है। आइए एक उदाहरण देखते हैं जहां हम मूल स्टाइलिंग को बनाए रखते हैं।

<head> <style> .blue { color: blue; } </style> <script src="https://code.jquery.com/jquery-3.5.0.js"></script> </head> <body> <h2> html() Demo: </h2> <div class='main'> <p class='blue'> Hello </p> <p> World </p> <p> Goodbye </p> </div> <script> </script> </body>

हमारे शुरुआती HTML पेज को देखते हुए, हम देखेंगे कि केवल "Hello" शब्द नीले रंग के साथ स्टाइल किया गया है।

इस उदाहरण में, हम "Hello" शब्द को नई सामग्री से बदलना चाहते हैं, लेकिन मूल स्टाइलिंग को बनाए रखना चाहते हैं। इसे पूरा करने के लिए, हम ब्लू क्लास नाम वाले पैराग्राफ को चुनते हैं।

 $('p.blue').html("Hello AGAIN")

हमने ब्लू क्लास से संबंधित पैराग्राफ को चुना और "Hello" को "Hello AGAIN" से बदल दिया। चूंकि html() एलिमेंट नामों में लिपटी सामग्री को बदलता है, नीला रंग बना रहेगा।

क्या होगा यदि हम सभी पैराग्राफ टेक्स्ट को बदलना चाहते हैं? यदि हम <p> एलिमेंट को चुनते हैं, तो यह उपरोक्त टेक्स्ट को "Hello AGAIN" के तीन उदाहरणों से बदल देगा।

 $('p').html("Hello AGAIN")

यहां हम HTML फाइल में सभी पैराग्राफ टैग्स को चुन रहे हैं और उनमें से प्रत्येक की सामग्री को "Hello AGAIN" से बदल रहे हैं। हमारे पहले उदाहरण की तरह, मूल स्टाइलिंग रेंडर होगी क्योंकि हम उन टैग्स में लिपटी सामग्री को बदल रहे हैं।

बिल्कुल जैसा हमने उम्मीद की थी। आइए अपने 'main' क्लास से संबंधित <div> में एक स्तर ऊपर जाते हैं। यह वह जगह है जहां पैरामीटर्स के रूप में HTML स्ट्रिंग्स पास करना काम आता है।

 $('div.main').html('<p class=blue>Main Div Content</p>')

हमारे main div के अंदर, हमारे पास तीन पैराग्राफ एलिमेंट्स हैं। यह जानकर कि html() कैसे काम करता है, हम उपरोक्त कोड से यह निष्कर्ष निकाल सकते हैं कि यह तीन <p> टैग्स को पैरामीटर के रूप में पास किए गए एक से बदल देगा। उपरोक्त अवधारणा के साथ गहराई से जाने के लिए HTML सीखने पर हमारी गाइड पढ़ें।

कोड की एक पंक्ति में, हमने तीन अलग-अलग पैराग्राफ एलिमेंट्स को बदल दिया और अपनी मूल क्लास स्टाइलिंग का उपयोग किया।

निष्कर्ष

jQuery html() HTML पेजेस पर सामग्री को बदलकर डायनामिक अनुभव बनाने के लिए एक आमतौर पर उपयोग किया जाने वाला मेथड है। क्योंकि html() HTML एलिमेंट्स के अंदर लिपटी सामग्री को बदलता है, jQuery सिलेक्टर्स और किसी भी स्टाइल क्लासेस पर ध्यान देना महत्वपूर्ण है। यह किसी भी अवांछित स्टाइल परिवर्तनों को रोकेगा।

हमने सीखा कि jQuery क्या है, इसका सिंटैक्स, और इसका उपयोग कैसे किया जा सकता है इसका एक उदाहरण। इस व्यापक रूप से उपयोग किए जाने वाले मेथड को जानने और अभ्यास करने में कुछ समय बिताएं।