अपनी साइट्स को अधिक इंटरैक्टिव बनाने के लिए आपको यह जानना होगा कि पेज पर दिखाई देने वाले टेक्स्ट या HTML को कैसे बदलना है। यहीं innerText और innerHTML HTML एट्रिब्यूट्स काम आते हैं।
ये एट्रिब्यूट्स DOM एलिमेंट के टेक्स्ट और उसके HTML कोड को बदलना आसान बनाते हैं। इस गाइड में, आप सीखेंगे कि JavaScript innerText और innerHTML एट्रिब्यूट्स का उपयोग कैसे करें।
JavaScript innerHTML क्या है?
JavaScript innerHTML प्रॉपर्टी एक वेब पेज पर किसी एलिमेंट की HTML सामग्री को सेट करती है। InnerHTML HTML DOM की एक प्रॉपर्टी है। innerHTML का उपयोग अक्सर <p> एलिमेंट की सामग्री को सेट और संशोधित करने के लिए किया जाता है।
आप innerHTML का उपयोग इस तरह कर सकते हैं:
document.getElementById("paragraph").innerHTML = "Career Karma!";
कोड की यह पंक्ति "paragraph" <p> एलिमेंट की सामग्री को "Career Karma!" पर सेट करती है। getElementById() मेथड किसी एलिमेंट को उसकी ID द्वारा प्राप्त करता है।
जब कोई पेज लोड होता है तो ब्राउज़र एक डॉक्यूमेंट ऑब्जेक्ट मॉडल (DOM) परिभाषित करता है। यह DOM पेज पर प्रदर्शित ऑब्जेक्ट्स की एक श्रृंखला है।
DOM का मतलब है कि आपको हर बार वेब एलिमेंट को बदलने के लिए HTML कोड बदलने की ज़रूरत नहीं है। आप DOM और JavaScript का उपयोग करके किसी विशेष सत्र में पेज कैसे दिखाई देता है, इसे बदल सकते हैं।
JavaScript innerText क्या है?
JavaScript innerText प्रॉपर्टी किसी एलिमेंट की टेक्स्ट सामग्री को सेट करती है। यह उसके वंशजों (descendants) की सामग्री को भी सेट करती है। वंशजों में पैराग्राफ के अंदर <span> टैग्स शामिल हो सकते हैं।
innerText का सिंटैक्स innerHTML के समान है:
document.getElementById("element").innerText = "This is a test.";
यह ID "element" वाले एलिमेंट के टेक्स्ट मान को "This is a test." पर सेट करता है।
आप अपने JavaScript कंसोल में जाकर इन मेथड्स को टेस्ट कर सकते हैं और बदलने के लिए एक एलिमेंट चुन सकते हैं:
यह पेज पर पहले <p> HTML टैग की सामग्री को बदलता है। यदि आप टेक्स्ट बदलना चाहते हैं, तो आप innerText एट्रिब्यूट का उपयोग कर सकते हैं:
यह पेज पर दूसरे पैराग्राफ (संख्या 1 द्वारा दर्शाया गया) की सामग्री को "This is a test" में बदलता है।
JavaScript में innerHTML और innerText का उपयोग करना
आइए वेब पेज पर टेक्स्ट बदलकर शुरू करते हैं। हम एक साधारण फ्लैशकार्ड वेब पेज बनाने जा रहे हैं। यह वेब पेज HTML के बारे में एक प्रश्न प्रदर्शित करेगा। इसमें एक बटन होगा जिसे क्लिक करने पर HTML के बारे में एक प्रश्न का उत्तर प्रकट होगा।
एक वेब पेज बनाएं
हमारा पहला कदम हमारे फ्रंट-एंड के लिए एक index.html फाइल बनाना है:
<!DOCTYPE html> <html> <head> <title>HTML Flashcard App</title> <link rel="stylesheet" href="./styles.css" /> </head> <body> <div class="flashcard"> <h2>Does a hyperlink only apply to text?</h2> <p>The answer will be revealed when you press "Show answer"</p> <button id="showAnswer">Show answer</button> <br /> <br /> <div id="showMessage"></div> </div> <script src="./scripts.js"></script> </body> </html>
यह पेज तीन घटकों के साथ एक कंटेनर बनाता है। पहला, हमारे पास वह प्रश्न है जो हम उपयोगकर्ता से पूछ रहे हैं। हमारे पास उत्तर प्रकट करने के तरीके के बारे में संदेश है। हमारा पेज उत्तर प्रकट करने के लिए एक बटन के साथ समाप्त होता है।
हमारा कोड हमारे एलिमेंट्स की टेक्स्ट सामग्री लौटाता है:
हम अपने पेज को सुंदर बनाने के लिए styles.css फाइल में कुछ CSS स्टाइल्स लागू करने जा रहे हैं:
<style> .flashcard { margin: auto; width: 50%; padding: 50px; margin-top: 10%; background-color: lightgreen; text-align: center; } button { border: none; background-color: hotpink; padding: 10px; border-radius: 10px; } </style>
अब आइए हमारे वेब पेज पर एक नज़र डालते हैं:
हमारी साइट कुछ ऐसी दिखती है जो फ्लैश कार्ड की तरह अधिक दिखती है। हमने अपने बटन को स्टाइल किया है।
JavaScript innerHTML और innerText का उपयोग करके टेक्स्ट बदलें
हम चाहते हैं कि बटन क्लिक होने पर प्रश्न का उत्तर प्रकट हो। सबसे पहले, हम उन टेक्स्ट और बटन एलिमेंट्स को चुनने जा रहे हैं जिनका उपयोग हम अपने JavaScript कोड में करेंगे। हम यह सारा कोड अपनी scripts.js फाइल में लिखेंगे:
var answerText = document.querySelector('p'); var button = document.querySelector('button');
अगला, हम एक JavaScript फंक्शन बनाने जा रहे हैं। यह फंक्शन बटन क्लिक होने पर हमारे प्रश्न का उत्तर प्रकट करता है:
function showAnswer() { answerText.innerText = "No. Hyperlinks can be used on both text and images."; }
हमारे फंक्शन को बटन दबाने पर सक्रिय करने के लिए, हम एक साधारण इवेंट लिसनर बनाने जा रहे हैं। यह लिसनर हमारे बटन पर क्लिक के लिए सुनता है:
button.addEventListener('click', showAnswer);
हमने अपना फ्लैश कार्ड ऐप सेट करना समाप्त कर लिया है। यदि हम अपना वेब पेज देखते हैं और "Show answer" बटन पर क्लिक करते हैं, तो हमारे पैराग्राफ में टेक्स्ट उत्तर प्रकट करने के लिए बदल जाता है:
हम JavaScript innerHTML का उपयोग करके इस ऐप में अधिक कार्यक्षमता जोड़ सकते हैं। मान लीजिए हम चाहते हैं कि बटन क्लिक होने पर फ्लैश कार्ड के नीचे एक संदेश प्रदर्शित हो। यह संदेश लाल रंग में दिखाई देना चाहिए। हम निम्न कोड का उपयोग करके यह संदेश बना सकते हैं:
var message = document.querySelector('#showMessage'); function showAnswer() { answerText.innerText = "No. Hyperlinks can be used on both text and images."; message.innerHTML = "<span style='color:red;'>You have revealed the answer.</span>"; }
आइए संशोधित showAnswer() फंक्शन और हमारे द्वारा लिखे गए नए क्वेरी सिलेक्टर के साथ अपना कोड चलाने का प्रयास करें:
हमने अपनी साइट पर एक HTML <span> टैग जोड़ने के लिए innerHTML मेथड का उपयोग किया है। यह टैग एक संदेश प्रदर्शित करता है जो उपयोगकर्ता द्वारा शो आंसर बटन दबाने पर लाल रंग में दिखाई देता है।
JavaScript innerText बनाम innerHTML
innerText और innerHTML दोनों प्रॉपर्टीज आपको किसी टैग की सामग्री को एक्सेस और बदलने देती हैं। innerText वंशजों या स्पेसिंग के बिना टेक्स्ट लौटाता है। innerHTML वंशजों और स्पेसिंग सहित टेक्स्ट लौटाता है।
आप innerText का उपयोग करेंगे यदि आप किसी एलिमेंट की सामग्री को सादे टेक्स्ट में देखना चाहते हैं। यदि आप किसी स्ट्रिंग में दिखाई देने वाले सभी HTML टैग्स देखना चाहते हैं तो innerHTML का उपयोग करना अधिक उपयुक्त है।
संक्षेप में, innerText आपको सादे टेक्स्ट के साथ काम करने देता है जबकि innerHTML आपको स्ट्रिंग में HTML के साथ काम करने देता है।
innerText और innerHTML दोनों को आधुनिक ब्राउज़र्स में व्यापक समर्थन प्राप्त है।
निष्कर्ष
innerText और innerHTML प्रॉपर्टीज HTML DOM में हेरफेर करती हैं। innerText स्पेसिंग या वंशजों के बिना किसी एलिमेंट की टेक्स्ट सामग्री लौटाता है। innerHTML किसी एलिमेंट की सामग्री और किसी भी स्पेसिंग और वंशजों को लौटाता है।
बोनस चुनौती के रूप में, देखें कि क्या आप हमारे उपरोक्त कोड को बटन दूसरी बार क्लिक होने पर उत्तर छिपाने के लिए बना सकते हैं। आपका कोड होना चाहिए:
- उत्तर छिपाएं जब उपयोगकर्ता बटन पर क्लिक करे
- उत्तर दिखने पर बटन के टेक्स्ट को "Show answer" से "Hide answer" में बदलें
- "You have revealed the answer" संदेश को तब भी रखें जब उपयोगकर्ता "Hide answer" दबाए
यदि आप JavaScript सीखने में मदद करने वाले अधिक ट्यूटोरियल ढूंढ रहे हैं, तो JavaScript शुरुआती लोगों के लिए सर्वश्रेष्ठ ट्यूटोरियल गाइड देखें।
