DOM
हेरफेर करने वाले तत्व
खोज…
क्लोनिंग तत्व
उस पर cloneNode विधि को लागू करके एक तत्व को क्लोन किया जा सकता है। यदि cloneNode करने के लिए दिया गया पहला पैरामीटर true , तो मूल के बच्चों को भी क्लोन किया जाएगा।
var original = document.getElementsByTagName("li")[0];
var clone = original.cloneNode(true);
एक तत्व जोड़ना
इस उदाहरण में हम "नया पाठ" पाठ के साथ एक नया सूची तत्व बनाते हैं, और पहली अनियंत्रित सूची, और इसकी पहली सूची तत्व का चयन करते हैं।
let newElement = document.createElement("li");
newElement.innerHTML = "new text";
let parentElement = document.querySelector("ul");
let nextSibling = parentElement.querySelector("li");
एक तत्व सम्मिलित करते समय, हम इसे मूल तत्व के तहत करते हैं, और उस मूल तत्व के किसी विशेष बच्चे तत्व से ठीक पहले।
parentElement.insertBefore(newElement, nextSibling);
नया तत्व
parentElementतहत औरnextSiblingसे पहले डाला जाता है।
जब कोई parentElement के अंतिम बाल तत्व के रूप में एक तत्व सम्मिलित करना चाहता है, तो दूसरा तर्क null हो सकता है।
parentElement.insertBefore(newElement, null);
अंतिम बच्चे के रूप में नया तत्व
parentElementतहत डाला गया है।
इसके बजाय, appendChild() का उपयोग केवल माता-पिता के बच्चों के बच्चे को जोड़ने के लिए किया जा सकता है।
parentElement.appendChild(newElement);
अंतिम बच्चे के रूप में नया तत्व
parentElementतहत डाला गया है।
एक तत्व की जगह
इस उदाहरण में हम "नया पाठ" पाठ के साथ एक नया सूची तत्व बनाते हैं, और पहली अनियंत्रित सूची, और इसकी पहली सूची तत्व का चयन करते हैं।
let newElement = document.createElement("li");
newElement.innerHTML = "new text";
let parentElement = document.querySelector("ul");
let nextSibling = parentElement.querySelector("li");
एक तत्व स्थान पर, हम का उपयोग replaceChild :
parentElement.replaceChild(newElement, nextSibling);
nextSiblingको DOM से हटा दिया गया है। इसकी जगह अबnewElement।
किसी तत्व को निकालना
उस पर remove() को कॉल करके एक तत्व को हटाया जा सकता है। वैकल्पिक रूप से, कोई भी अपने माता-पिता पर removeChild() कॉल कर सकता है। removeChild() को remove() से बेहतर ब्राउज़र समर्थन है।
element.remove();
element, और इसके सभी चाइल्डनोड्स को DOM से हटा दिया जाता है।
parentElement.removeChild(element);
element, और इसके सभी चाइल्डनोड्स को DOM से हटा दिया जाता है।
किसी भी स्थिति में, कोई भी इस नोड को डोम में बाद के बिंदु पर सम्मिलित कर सकता है जब तक कि इस नोड के संदर्भ अभी भी हैं।
एपेंड और प्रेपेंड तरीके
जावास्क्रिप्ट में अब एपेंड और प्रीपेंड तरीके हैं जो jQuery में मौजूद थे
का मुख्य लाभ यह append और prepend के विपरीत है appendChild और insertBefore , यह तर्क या तो HTML तत्व या सादा पाठ (जो पाठ नोड्स में परिवर्तित हो जाएगा) के किसी भी संख्या ले जा सकते हैं।
कहने के लिए 1 डिव, 1 टेक्स्ट नोड और 1 स्पैन कहें
document.body.append(document.createElement('div'),"Hello world",document.createElement('span'))
यह पृष्ठ को निम्न संरचना में बदल देगा
<body>
.....(other elements)
<div></div>
"Hello World"
<span></span>
</body>
शरीर में समान करने के लिए
उपयोग
document.body.prepend(document.createElement('div'),"Hello world",document.createElement('span'))
यह पृष्ठ को निम्न संरचना में बदल देगा
<body>
<div></div>
"Hello World"
<span></span>
.....(other elements)
</body>
ध्यान दें कि ब्राउज़र समर्थन कर रहे हैं
क्रोम 54+
फ़ायरफ़ॉक्स 49+
ओपेरा 39+
MDN पर अधिक पढ़ें