JQuery html () विधि का उपयोग कैसे करें

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

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

jQuery html क्या है ()?

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

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

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

याद रखें कि jQuery विधियों को पहले चयनकर्ता पर बुलाया जाता है। चयनकर्ता

टैग जितना विस्तृत हो सकता है या आईडी के साथ

जितना विशिष्ट हो सकता है (

)। एक बार वांछित तत्व का चयन करने के बाद, हम html() . पर कॉल कर सकते हैं और HTML स्ट्रिंग में html() . के पैरामीटर के रूप में पास करें . CSS चयनकर्ताओं की विस्तृत व्याख्या के लिए, हमारी मार्गदर्शिका देखें।

html() या तो एक स्ट्रिंग अक्षर को एक पैरामीटर के रूप में स्वीकार करता है या स्ट्रिंग वाले एक चर को स्वीकार करता है। "नई सामग्री" का एक स्ट्रिंग शाब्दिक पास करना "नई सामग्री" के संदर्भ में एक चर को पारित करने के समान ही प्रस्तुत करेगा।

मान लें कि हमारे पास यह आसान

है:

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

हम पूरे

टैग को बदल सकते हैं:

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

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

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

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

अगर मूल

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

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

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

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

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

अब जबकि मूल सिंटैक्स को कवर कर लिया गया है, आइए एक उदाहरण पर एक नज़र डालते हैं।

html() jQuery का उदाहरण

हमने देखा कि कैसे html() हमारे उपरोक्त "नई सामग्री" उदाहरण में चयनित तत्व के अंदर की सामग्री को बदल देता है। यह एक स्ट्रिंग अक्षर या एक 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" शब्द नीले रंग से स्टाइल किया गया है।

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

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

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

क्या होगा अगर हम सभी पैराग्राफ टेक्स्ट को बदलना चाहते हैं? यदि हम

तत्व का चयन करते हैं, तो यह उपरोक्त पाठ को "Hello AGAIN" के तीन उदाहरणों से बदल देगा।

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

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

जैसा हमने उम्मीद की थी। आइए हमारे चयनकर्ता में एक स्तर ऊपर हमारे

'मुख्य' वर्ग से संबंधित हैं। यह वह जगह है जहाँ HTML स्ट्रिंग्स को पैरामीटर के रूप में पास करना काम आता है।

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

हमारे मुख्य डिव के अंदर, हमारे पास तीन पैराग्राफ एलिमेंट हैं। यह जानना कि कैसे html() काम करता है, हम यह अनुमान लगा सकते हैं कि उपरोक्त कोड तीन

टैग को एक पैरामीटर के रूप में पारित एक के साथ बदल देगा। उपरोक्त अवधारणा को गहराई से समझने के लिए HTML सीखने पर हमारी मार्गदर्शिका पढ़ें

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

निष्कर्ष

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

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