जावास्क्रिप्ट एचटीएमएल डॉम एलिमेंट (नोड)

नोड (HTML एलीमेंट) जोड़ना और हटाना

नए HTML एलीमेंट (नोड) बनाना

यदि आप HTML DOM में नए एलीमेंट (एलीमेंट नोड) जोड़ना चाहते हैं, तो आपको पहले इस एलीमेंट को बनाना होगा और फिर इसे मौजूदा एलीमेंट में जोड़ें।

उदाहरण

<div id="div1">
<p id="p1">यह एक पैराग्राफ है。</p>
<p id="p2">यह एक अन्य पैराग्राफ है。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("यह नया टेक्स्ट है。");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
</script>

अपने आप प्रयास करें

उदाहरण बताता है

इस कोड एक नया टेक्स्ट नोड बनाता है: <p> एलिमेंट:

var para = document.createElement("p");

को <p> एलिमेंट को टेक्स्ट जोड़ने के लिए, आपको पहले टेक्स्ट नोड को बनाना होगा। इस कोड एक नया टेक्स्ट नोड बनाता है:

var node = document.createTextNode("This is a new paragraph.");

तब आपको <p> एलिमेंट को इस टेक्स्ट नोड को जोड़ें:

para.appendChild(node);

अंत में, आपको इस नए एलिमेंट को पहले एलिमेंट के अंत में जोड़ना होगा。

इस कोड एक पहले एलिमेंट को खोजता है:

var element = document.getElementById("div1");

इस कोड इस पहले एलिमेंट को नए एलिमेंट को जोड़ता है:

element.appendChild(para);

नए HTML एलिमेंट को बनाने - insertBefore()

पहले उदाहरण में appendChild() method, नए एलिमेंट को पैरेंट के अंतिम चाइल्ड के रूप में जोड़ सकते हैं。

इसके अलावा, आप इस विधि का इस्तेमाल कर सकते हैं insertBefore() तरीका:

उदाहरण

<div id="div1">
<p id="p1">यह एक पैराग्राफ है。</p>
<p id="p2">यह एक अन्य पैराग्राफ है。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("यह नया टेक्स्ट है。");
para.appendChild(node);
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>

अपने आप प्रयास करें

विदित HTML एलिमेंट को हटाया

यदि आप HTML एलिमेंट को हटाना चाहते हैं, तो remove() तरीका:

उदाहरण

<div>
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>
<script>
const elmnt = document.getElementById("p1"); elmnt.remove();
</script>

अपने आप प्रयास करें

उदाहरण बताता है

यह HTML डॉक्यूमेंट एक पैरेंट एलिमेंट (दो चाइल्ड नोडों) का समावेश करता है (दो <p> एलिमेंट) का <div> एलिमेंट:

<div>
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>

हटाने के लिए देखने वाला एलिमेंट:

const elmnt = document.getElementById("p1");

फिर इस एलिमेंट पर remove() तरीका:

elmnt.remove();

ध्यान:remove() विधि पुराने ब्राउज़रों में काम नहीं करती, नीचे दिए उदाहरण को देखें, जिसमें उसके स्थान पर कैसे इस्तेमाल करना है removeChild()।

चाइल्ड नोडों को हटाना

जो दायरा को नहीं समर्थित करता remove() ब्राउज़र के लिए एक नई विधि के रूप में, आपको एक एलिमेंट को हटाने के लिए पैरेंट नोड को पाना होगा:

उदाहरण

<div id="div1">
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>
<script>
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.removeChild(child);
</script>

अपने आप प्रयास करें

उदाहरण बताता है

यह HTML डॉक्यूमेंट एक पैरेंट एलिमेंट (दो चाइल्ड नोडों) का समावेश करता है (दो <p> एलिमेंट) का <div> एलिमेंट:

<div id="div1">
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>

पाया id="div1" के एलिमेंट:

const parent = document.getElementById("div1");

पाया id="p1" का <p> एलिमेंट:

const child = document.getElementById("p1");

पैरेंट एलिमेंट से चाइल्ड को हटाया:

parent.removeChild(child);

यह एक सामान्य समाधान तरीका है: पढ़ने के लिए उस सही सही चाइल्ड नोड को पाया, और उसके parentNode एट्रिब्यूट उस पैरेंट नोड को पाया:

const child = document.getElementById("p1");
child.parentNode.removeChild(child);

HTML एलीमेंट बदलना

यदि आप एलीमेंट को बदलना चाहते हैं, तो इसे इस्तेमाल करें replaceChild() तरीका:

उदाहरण

<div id="div1">
<p id="p1">यह एक पैराग्राफ है。</p>
<p id="p2">यह एक अन्य पैराग्राफ है。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("यह नया टेक्स्ट है。");
para.appendChild(node);
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>

अपने आप प्रयास करें