जावास्क्रिप्ट एचटीएमएल डोम तत्व (नोड्स)
नोड्स जोड़ना और हटाना (HTML Elements)
नए HTML तत्व बनाना (नोड्स)
एचटीएमएल डोम में एक नया तत्व जोड़ने के लिए, आपको पहले तत्व (एलिमेंट नोड) बनाना होगा, और फिर इसे मौजूदा तत्व में जोड़ना होगा।
उदाहरण
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
const element = document.getElementById("div1");
element.appendChild(para);
</script>
उदाहरण समझाया गया
<p>यह कोड एक नया तत्व बनाता है :
const para = document.createElement("p");
तत्व में टेक्स्ट जोड़ने के लिए <p>, आपको पहले एक टेक्स्ट नोड बनाना होगा। यह कोड एक टेक्स्ट नोड बनाता है:
const node = document.createTextNode("This is a new paragraph.");
फिर आपको टेक्स्ट नोड को <p>तत्व में जोड़ना होगा:
para.appendChild(node);
अंत में आपको नए तत्व को मौजूदा तत्व में जोड़ना होगा।
यह कोड एक मौजूदा तत्व पाता है:
const element = document.getElementById("div1");
यह कोड नए तत्व को मौजूदा तत्व में जोड़ता है:
element.appendChild(para);
नए HTML तत्व बनाना - सम्मिलित करें से पहले ()
पिछले उदाहरण में appendChild()विधि ने नए तत्व को माता-पिता के अंतिम बच्चे के रूप में जोड़ा।
यदि आप नहीं चाहते हैं कि आप insertBefore()विधि का उपयोग कर सकते हैं:
उदाहरण
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
const element = document.getElementById("div1");
const 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 दस्तावेज़ में <div>दो चाइल्ड नोड्स (दो <p>
तत्व) वाला एक तत्व है:
<div>
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
वह तत्व ढूंढें जिसे आप हटाना चाहते हैं:
const elmnt = document.getElementById("p1");
फिर उस तत्व पर निकालें () विधि निष्पादित करें:
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 दस्तावेज़ में <div>दो चाइल्ड नोड्स (दो <p>
तत्व) वाला एक तत्व है:
<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");
<p>इसके साथ तत्व खोजें id="p1":
const child = document.getElementById("p1");
बच्चे को माता-पिता से निकालें:
parent.removeChild(child);
यहां एक सामान्य समाधान दिया गया है: उस बच्चे को ढूंढें जिसे आप निकालना चाहते हैं, और
parentNodeमाता-पिता को खोजने के लिए उसकी संपत्ति का उपयोग करें:
const child = document.getElementById("p1");
child.parentNode.removeChild(child);
HTML तत्वों को बदलना
किसी तत्व को HTML DOM में बदलने के लिए, replaceChild()विधि का उपयोग करें:
उदाहरण
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>