HTML DOM replaceChild() मेथड

replaceChild() मेथड क्या है?

DOM replaceChild() मेथड किसी पैरेंट नोड के एक चाइल्ड नोड को एक नए नोड से प्रतिस्थापित करता है। यह हटाए गए पुराने चाइल्ड नोड को लौटाता है।

सिंटैक्स

parentNode.replaceChild(newNode, oldNode)

पैरामीटर

• newNode: नया नोड जो पुराने नोड को प्रतिस्थापित करेगा।
• oldNode: प्रतिस्थापित होने वाला मौजूदा चाइल्ड नोड।

रिटर्न मान

प्रतिस्थापित (पुराना) चाइल्ड नोड।

उदाहरण

यह उदाहरण एक सूची में पहले विषय "Physics" को "Biology" से प्रतिस्थापित करता है:

<!DOCTYPE html>
<html>
<head>
<style>
  html { height: 100%; }
  body {
    text-align: center;
    color: #fff;
    background: #ff7f5094;
    height: 100%;
  }
  p { font-weight: 700; font-size: 1.2rem; }
  ul { list-style-type: none; padding: 0; }
  .btn {
    background: #0197F6;
    border: none;
    height: 2rem;
    border-radius: 2px;
    width: 35%;
    margin: 2rem auto;
    display: block;
    color: #fff;
    outline: none;
    cursor: pointer;
  }
  .show { font-size: 1.5rem; }
</style>
</head>
<body>
<h1>DOM replaceChild() मेथड डेमो</h1>
<p>नमस्ते, मेरे पसंदीदा विषय हैं:</p>
<ul id="subjectList">
  <li>Physics</li>
  <li id="chemistry">Chemistry</li>
  <li>Maths</li>
  <li>English</li>
</ul>
<button onclick="changeSubject()" class='btn'>Physics को Biology से बदलें</button>
<script>
  function changeSubject() {
    var textNode = document.createTextNode("Biology");
    var list = document.getElementById("subjectList");
    var oldChild = list.firstElementChild; // या list.childNodes[0] टेक्स्ट नोड्स के लिए
    var replaced = list.replaceChild(textNode, oldChild);
    console.log("प्रतिस्थापित:", replaced.textContent);
  }
</script>
</body>
</html>

आउटपुट

"Physics को Biology से बदलें" बटन पर क्लिक करने पर, सूची का पहला आइटम "Physics" से "Biology" में बदल जाता है।

महत्वपूर्ण बिंदु

• पैरेंट पर कॉल करें: मेथड पैरेंट नोड पर कॉल किया जाता है, न कि पुराने या नए चाइल्ड पर।
• पुराना नोड लौटाया जाता है: आप इसे बाद में उपयोग के लिए संग्रहीत कर सकते हैं (उदाहरण: अनडू कार्यक्षमता)।
• नया नोड ले जाया जाता है: यदि newNode पहले से दस्तावेज़ में है, तो इसे अपने वर्तमान पैरेंट से हटा दिया जाता है।
• टेक्स्ट नोड्स: आप document.createTextNode() से बने टेक्स्ट नोड्स के साथ तत्व नोड्स को प्रतिस्थापित कर सकते हैं (जैसा कि उदाहरण में)।

replaceChild() बनाम innerHTML

सामान्य उपयोग के मामले

• लोडिंग स्पिनर को वास्तविक कंटेंट से प्रतिस्थापित करना।
• फॉर्म फ़ील्ड को पुष्टिकरण संदेश से स्वैप करना।
• डायनामिक सूचियों में आइटम अपडेट करना (वर्चुअलाइज़्ड सूचियों के लिए कुशल)।
• तत्व प्रकार बदलना (उदाहरण: <span> को <input> से प्रतिस्थापित करना इनलाइन एडिटिंग के लिए)।