जावास्क्रिप्ट आंतरिक HTML और आंतरिक पाठ:एक गाइड

आपको यह जानना होगा कि आपकी साइट को अधिक इंटरैक्टिव बनाने के लिए पृष्ठ पर दिखाई देने वाले टेक्स्ट या HTML को कैसे बदला जाए। वहीं आंतरिक पाठ और आंतरिक HTML HTML विशेषताएँ आती हैं।

ये विशेषताएँ किसी DOM तत्व के टेक्स्ट और उसके HTML कोड को बदलना आसान बनाती हैं। इस गाइड में, आप सीखेंगे कि जावास्क्रिप्ट आंतरिक पाठ . का उपयोग कैसे करें और आंतरिक HTML विशेषताएँ।

JavaScript आंतरिक HTML क्या है?

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

तत्व की सामग्री को सेट और संशोधित करने के लिए किया जाता है।

आप आंतरिक HTML का उपयोग इस प्रकार कर सकते हैं:

document.getElementById(“paragraph”).innerHTML =“कैरियर कर्म!”;

कोड की यह पंक्ति "पैराग्राफ"

तत्व की सामग्री को "कैरियर कर्म!" पर सेट करती है। GetElementById () विधि किसी तत्व को उसकी आईडी द्वारा पुनर्प्राप्त करती है।

पृष्ठ लोड होने पर ब्राउज़र दस्तावेज़ ऑब्जेक्ट मॉडल (डीओएम) को परिभाषित करता है। यह डोम पृष्ठ पर प्रदर्शित वस्तुओं की एक श्रृंखला है।

DOM का मतलब है कि आपको हर बार वेब एलिमेंट को बदलने के लिए HTML कोड बदलने की जरूरत नहीं है। किसी विशेष सत्र में पृष्ठ कैसे दिखाई देता है, इसे बदलने के लिए आप DOM और JavaScript का उपयोग कर सकते हैं।

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

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

JavaScript innerText क्या है?

JavaScript innerText गुण किसी तत्व की टेक्स्ट सामग्री सेट करता है। यह अपने वंशजों की सामग्री भी निर्धारित करता है। वंशजों में एक पैराग्राफ के अंदर टैग शामिल हो सकते हैं।

इनरटेक्स्ट का सिंटैक्स इनरएचटीएमएल के समान है:

document.getElementById("element").innerText ="यह एक परीक्षा है।";

यह "एलिमेंट" आईडी वाले एलीमेंट के टेक्स्ट मान को "यह एक परीक्षण है" पर सेट करता है।

आप अपने जावास्क्रिप्ट कंसोल में जाकर और बदलने के लिए एक तत्व का चयन करके इन विधियों का परीक्षण कर सकते हैं:

यह वेब पेज पर पहले

HTML टैग की सामग्री को बदल देता है। यदि आप पाठ को बदलना चाहते हैं, तो आप आंतरिक पाठ . का उपयोग कर सकते हैं विशेषता:

यह पृष्ठ पर दूसरे पैराग्राफ (संख्या 1 द्वारा चिह्नित) की सामग्री को "यह एक परीक्षण है" में बदल देता है।

JavaScript में innerHTML और innerText का उपयोग करना

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

वेब पेज बनाएं

हमारा पहला कदम हमारे फ़्रंट-एंड के लिए एक index.html फ़ाइल बनाना है:

      
 
क्या हाइपरलिंक केवल टेक्स्ट पर लागू होता है?
 

जब आप "उत्तर दिखाएं" दबाते हैं तो उत्तर प्रकट हो जाएगा
 दिखाएं उत्तर 
 
 

 
   

 यह पृष्ठ तीन घटकों के साथ एक कंटेनर बनाता है। सबसे पहले, हमारे पास वह प्रश्न है जो हम उपयोगकर्ता से पूछ रहे हैं। हमारे पास संदेश है कि उत्तर कैसे प्रकट किया जाए। हमारा पृष्ठ उत्तर प्रकट करने के लिए एक बटन के साथ समाप्त होता है।
 

 हमारा कोड हमारे तत्वों की टेक्स्ट सामग्री लौटाता है:
  

 हम अपने पेज को सुंदर बनाने के लिए कुछ सीएसएस शैलियों को एक Style.css फ़ाइल में लागू करने जा रहे हैं:
 
 

 आइए अब हमारे वेब पेज पर एक नजर डालते हैं:
 
  

 हमारी साइट कुछ ऐसा दिखाती है जो फ्लैश कार्ड की तरह दिखती है। हमने अपने बटन को स्टाइल कर दिया है।
 
JavaScript इनर HTML और इनर टेक्स्ट का उपयोग करके टेक्स्ट बदलें
 

 हम चाहते हैं कि बटन पर क्लिक करने पर प्रश्न का उत्तर सामने आए। सबसे पहले, हम टेक्स्ट और बटन तत्वों का चयन करने जा रहे हैं जिनका उपयोग हम अपने जावास्क्रिप्ट कोड में करने जा रहे हैं। यह सभी कोड हम अपनी scripts.js फ़ाइल में लिखेंगे:
 
var answerText =document.querySelector('p');var button =document.querySelector('button');
 

 अगला, हम एक जावास्क्रिप्ट फ़ंक्शन बनाने जा रहे हैं। बटन क्लिक करने पर यह फ़ंक्शन हमारे प्रश्न का उत्तर प्रकट करता है:
 
function showAnswer() { answerText.innerText ="नहीं। हाइपरलिंक्स का इस्तेमाल टेक्स्ट और इमेज दोनों पर किया जा सकता है।";}
 

 एक बटन प्रेस पर हमारे फ़ंक्शन को सक्रिय करने के लिए, हम एक साधारण ईवेंट श्रोता बनाने जा रहे हैं। यह श्रोता हमारे बटन पर एक क्लिक के लिए सुनता है:
 
button.addEventListener('click', showAnswer);
 

 हमने अपना फ्लैश कार्ड ऐप सेट करना समाप्त कर लिया है। यदि हम अपना वेब पेज देखते हैं और "उत्तर दिखाएं" बटन पर क्लिक करते हैं, तो हमारे पैराग्राफ में टेक्स्ट को उत्तर प्रकट करने के लिए बदल दिया जाता है:
  

 हम जावास्क्रिप्ट आंतरिक HTML . का उपयोग करके इस ऐप में और अधिक कार्यक्षमता जोड़ सकते हैं . मान लीजिए कि हम चाहते हैं कि बटन क्लिक करने के बाद फ्लैश कार्ड के नीचे एक संदेश प्रदर्शित हो। यह संदेश लाल रंग में दिखना चाहिए। हम निम्नलिखित कोड का उपयोग करके यह संदेश बना सकते हैं:
 
var message =document.querySelector('#showMessage');function showAnswer() { answerText.innerText ="No. Hyperlinks को टेक्स्ट और इमेज दोनों पर इस्तेमाल किया जा सकता है।"; message.innerHTML ="आपने जवाब बता दिया है।";}
 

 आइए हमारे कोड को संशोधित showAnswer() . के साथ चलाने का प्रयास करें फ़ंक्शन और हमारे द्वारा लिखा गया नया क्वेरी चयनकर्ता:
  

 हमने आंतरिक HTML . का उपयोग किया है हमारी साइट पर HTML  टैग जोड़ने की विधि। यह टैग एक संदेश प्रदर्शित करता है जो उपयोगकर्ता द्वारा उत्तर दिखाएं बटन दबाने पर लाल रंग में दिखाई देता है।
 
JavaScript innerText बनाम innerHTML
 

 इनरटेक्स्ट और इनरएचटीएमएल दोनों गुण आपको किसी टैग की सामग्री को एक्सेस करने और बदलने की सुविधा देते हैं। इनरटेक्स्ट टेक्स्ट को बिना किसी वंशज या रिक्ति के लौटाता है। innerHTML किसी भी वंशज और रिक्ति सहित टेक्स्ट लौटाता है।
 

 यदि आप किसी तत्व की सामग्री को सादे पाठ में देखना चाहते हैं तो आप innerText का उपयोग करेंगे। यदि आप सभी HTML टैग्स को एक स्ट्रिंग में देखना चाहते हैं, तो आंतरिक HTML का उपयोग करना अधिक उपयुक्त है।
 

 संक्षेप में, आंतरिक पाठ आपको सादे पाठ के साथ काम करने देता है जबकि आंतरिक HTML आपको एक स्ट्रिंग में HTML के साथ काम करने देता है।
 

 इनरटेक्स्ट और इनरएचटीएमएल दोनों को आधुनिक ब्राउज़रों में व्यापक समर्थन प्राप्त है।
 
निष्कर्ष
 

 आंतरिक पाठ और आंतरिक HTML गुण HTML DOM में हेरफेर करते हैं। इनरटेक्स्ट किसी तत्व की टेक्स्ट सामग्री को बिना रिक्ति या वंशज के वापस करता है। आंतरिक HTML किसी तत्व की सामग्री और किसी भी रिक्ति और वंशज को लौटाता है।
 

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

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