लोड हो रहा है...

HTML बदलना

पेज पर फेरी की पर्ची पहले से है: नाव का नाम Gull है, समय 09:10 है, और नोट Boarding कहता है। HTML बदलना मतलब उस एलिमेंट में नई सामग्री लिखना जो पहले से हाथ में है। boat.textContent = "Heron" शब्द Heron को ज्यों का त्यों रखता है। note.textContent = "<em>Late</em>" वही अक्षर दिखाता है, और note.querySelector("em") का मान null होता है। note.innerHTML = "<em>Late</em>" एक em बनाता है जिसका टेक्स्ट Late है। इसके बाद note.textContent Late होता है, जबकि note.innerHTML में टैग अभी भी रहते हैं। दूसरी लिखत, note.innerHTML = "Dock 2", उस em को हटा देती है। note.insertAdjacentHTML("beforeend", " <span>gate B</span>") Dock 2 को रखता है और gate B जोड़ता है, इसलिए नोट Dock 2 gate B पढ़ता है। समय को कुछ असाइन नहीं होता, इसलिए वह 09:10 रहता है।

लिखना, दोबारा खोजना नहीं

पिछला पेज नोड ढूँढने के तरीके तुलना करता था। यह पेज कोई संग्रह नहीं गिनता, कोई इंडेक्स नहीं पढ़ता, और parentElement पर नहीं चलता। getElementById सिर्फ पर्ची देता है। सबक वह मान है जो तुम असाइन करते हो।

हर लिखत नोट पर क्या छोड़ती है

नोट Boarding से शुरू होता है। पंक्तियाँ क्रम से पढ़ो। हर असाइनमेंट नोट को बदलता है या आगे बढ़ाता है।

📊 हर लिखत नोट पर क्या छोड़ती है

लिखत क्या दिखता है क्या बचता है आसान भ्रम
textContent = "Heron" नाव पर Heron एक टेक्स्ट नोड Heron नाम का एलिमेंट
textContent = "<em>Late</em>" अक्षर <em>Late</em> कोई em एलिमेंट नहीं असली em
innerHTML = "<em>Late</em>" Late एक em textContent में टैग की उम्मीद
innerHTML = "Dock 2" Dock 2 em चला गया em का Dock 2 के पास रहना
insertAdjacentHTML("beforeend", " <span>gate B</span>") Dock 2 gate B Dock 2 और एक span innerHTML, जो Dock 2 गिरा देता है

textContent स्ट्रिंग रखता है और टैग नहीं पढ़ता। innerHTML टैग पढ़ता है और एलिमेंट के पुराने हर बच्चे को हटा देता है। insertAdjacentHTML भी टैग पढ़ता है, पर beforeend नए नोड को मौजूदा सामग्री के बाद रखता है। खिड़की पर टाइप किया नाव का नाम textContent में जाता है। वही स्ट्रिंग innerHTML में हो तो छोटा-से चिह्न मार्कअप बन जाता है।

लिखने से पहले पर्ची पढ़ो

फ़ाइल तीन मानों के साथ खुलती है। अभी कोई असाइनमेंट नहीं चला।

पर्ची पढ़ना

javascript 
console.log(document.getElementById("boat").textContent);
console.log(document.getElementById("when").textContent);
console.log(document.getElementById("note").textContent);

लॉग Gull, 09:10, और Boarding हैं। समय अलग पैराग्राफ है। बाद की लिखतें when को नहीं छूतीं।

शब्द शब्द ही रहते हैं

textContent हर बच्चे को एक टेक्स्ट नोड से बदलता है। जो अक्षर टैग जैसे लगते हैं वे अक्षर ही रहते हैं।

सादे शब्द

javascript 
let boat = document.getElementById("boat");
let note = document.getElementById("note");
boat.textContent = "Heron";
note.textContent = "<em>Late</em>";
console.log(boat.textContent);
console.log(note.textContent);
console.log(note.querySelector("em"));

पहली पंक्ति Heron है। दूसरी अक्षर <em>Late</em> हैं। तीसरी null है। नोट टैग को टेक्स्ट की तरह दिखाता है। उसने एलिमेंट नहीं बनाया।

innerHTML एलिमेंट बनाता है

वही अक्षर innerHTML को दो। पार्सर स्ट्रिंग को नोड बनाता है और नोट में जो था उसे बदल देता है।

पार्स हुआ मार्कअप

javascript 
let note = document.getElementById("note");
note.innerHTML = "<em>Late</em>";
console.log(note.textContent);
console.log(note.innerHTML);
console.log(note.querySelector("em") === null);

पहली पंक्ति Late है। दूसरी <em>Late</em> है, क्योंकि innerHTML मार्कअप लौटाता है, टैग सहित। तीसरी false है: em मौजूद है, इसलिए वह null नहीं। दिखने वाले शब्द और मार्कअप स्ट्रिंग एक ही एलिमेंट की दो रीडिंग हैं।

अगला innerHTML उस em को मिटाता है

innerHTML का नया मान पूरी नोट बदल देता है। em नए टेक्स्ट के बगल में नहीं रहता।

फिर से बदलना

javascript 
let note = document.getElementById("note");
note.innerHTML = "Dock 2";
console.log(note.textContent);
console.log(note.querySelector("em"));

पहली पंक्ति Dock 2 है। दूसरी null है। Boarding पहले ही जा चुका था। यह लिखत em को भी ले जाती है।

gate B जोड़ो और Dock 2 रखो

insertAdjacentHTML("beforeend", ...) एक टुकड़ा पढ़ता है और उसे अंत में रखता है। यह स्ट्रिंग एक स्पेस से शुरू होती है, ताकि दोनों हिस्से दो शब्द रहें। और स्थान भी हैं। यह पेज सिर्फ beforeend इस्तेमाल करता है।

अंत में जोड़ना

javascript 
let note = document.getElementById("note");
note.insertAdjacentHTML("beforeend", " <span>gate B</span>");
console.log(note.textContent);
console.log(note.querySelector("span").textContent);

पहली पंक्ति Dock 2 gate B है। दूसरी gate B है। Dock 2 अभी नोट में है। वही span स्ट्रिंग innerHTML से असाइन करने पर Dock 2 मिट जाता।

पर्ची के नीचे एक पंक्ति

स्क्रिप्ट body के अंत में है, पर्ची के मौजूद होने के बाद। वह Late शब्द को Dock 2 द्वारा em बदलने से पहले सहेजती है, फिर नाव, उस सहेजे शब्द, और gate B जुड़ने के बाद की नोट से एक पंक्ति लिखती है।

पेज डेमो — फेरी की पर्ची

html 
<!DOCTYPE html>
<html>
<head>
<title>changing html — page</title>
</head>
<body>
<article id="slip">
<h2 id="boat">Gull</h2>
<p id="when">09:10</p>
<p id="note">Boarding</p>
<p id="line">…</p>
</article>
<script>
let boat = document.getElementById("boat");
let note = document.getElementById("note");
boat.textContent = "Heron";
note.innerHTML = "<em>Late</em>";
let late = note.textContent;
note.innerHTML = "Dock 2";
note.insertAdjacentHTML("beforeend", " <span>gate B</span>");
document.getElementById("line").textContent = boat.textContent + " / " + late + " / " + note.textContent;
</script>
</body>
</html>

पंक्ति Heron / Late / Dock 2 gate B पढ़ती है। समय अब भी 09:10 है। पंक्ति का Late मिटने से पहले सहेजा शब्द है। नोट खुद अब Late नहीं कहता। अगला पेज ऐसे एलिमेंट का CSS बदलता है। चुनने का नया तरीका नहीं लाता।

पर्ची जाँचो

  1. तीन शुरुआती टेक्स्ट लॉग करो और Gull, 09:10, Boarding की उम्मीद रखो
  2. नाव को Heron करो और नोट को em अक्षरों पर रखो; वही स्ट्रिंग और null em उम्मीद करो
  3. innerHTML को em स्ट्रिंग पर रखो; textContent Late, टैग सहित innerHTML, और em जो null नहीं
  4. innerHTML को Dock 2 करो और em के लिए null उम्मीद करो
  5. span को beforeend से जोड़ो; Dock 2 gate B, फिर span का टेक्स्ट gate B
  6. पंक्ति पढ़ो: Heron / Late / Dock 2 gate B; समय पढ़ो: 09:10

इस पर्ची पर चूक

पेज खुलता रहता है। असाइनमेंट ने गलत तरह का मान लिखा।

  • खिड़की पर टाइप नाम को innerHTML में रखना, जहाँ < मार्कअप बन जाता है
  • यह उम्मीद कि textContent = "<em>Late</em>" एक em बनाएगा
  • em लिखने के बाद textContent पढ़कर उस स्ट्रिंग में टैग की उम्मीद
  • innerHTML फिर असाइन करके em के रहने की उम्मीद
  • gate B को innerHTML से जोड़ना और Dock 2 खोना
  • आगे का स्पेस छोड़ना, जिससे नोट Dock 2gate B बन जाए
  • यहाँ style सेट करना; अगला पेज CSS बदलता है
  • यहाँ createElement बुलाना; बाद का पेज नए नोड बनाता है

यह साथ ले जाओ

  • textContent सादा टेक्स्ट लिखता है और टैग नहीं पढ़ता
  • innerHTML टैग पढ़ता है और हर बच्चे को बदलता है
  • em लिखने के बाद textContent Late होता है और innerHTML में टैग रहते हैं
  • दूसरा innerHTML उस em को मिटाता है
  • insertAdjacentHTML("beforeend", ...) मार्कअप जोड़ता है और Dock 2 रखता है
  • समय 09:10 रहता है क्योंकि उसे कुछ असाइन नहीं होता
  • पंक्ति Heron / Late / Dock 2 gate B पढ़ती है

🧠 अपने ज्ञान की परीक्षा करें

शुरू करने के लिए तैयार

अपने ज्ञान की परीक्षा करें

इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं

❓
8
प्रश्न
🎯
70%
पास करने के लिए
♾️
∞
समय
🔄
∞
प्रयास

📝 निर्देश

  • हर प्रश्न को ध्यान से पढ़ें
  • हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
  • आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
  • आपकी प्रगति शीर्ष पर दिखाई जाएगी
विषय 46 का 47
Javascript ट्यूटोरियल