insertBefore मेथड

insertBefore मेथड किसी दूसरे एलिमेंट के पहले एलिमेंट इन्सर्ट करने की अनुमति देता है। createElement की मदद से एलिमेंट बनाने के बाद यह सबसे अधिक इस्तेमाल किया जाता है। यह मेथड उस पेरेंट पर अप्लाई किया जाता है जिस एलिमेंट के पहले इन्सर्शन होगा।

सिंटैक्स

पेरेंट.insertBefore(एलिमेंट, किसके पहले इन्सर्ट करना है);

उदाहरण

एक पैराग्राफ बनाएं और उसे दूसरे पैराग्राफ के पहले रखें:

<div id="parent">
	<p>elem 1</p>
	<p id="before">elem 2</p>
	<p>elem 3</p>
</div>

let parent = document.querySelector('#parent');
let before = document.querySelector('#before');

let p = document.createElement('p');
p.textContent = '!';

parent.insertBefore(p, before);

कोड एक्सेक्यूट करने का रिजल्ट:

<div id="parent">
	<p>elem 1</p>
	<p>!</p>
	<p>elem 2</p>
	<p>elem 3</p>
</div>

उदाहरण

#parent एलिमेंट की शुरुआत में एक पैराग्राफ जोड़ें। इसके लिए हम #parent के पहले चाइल्ड के पहले अपना पैराग्राफ इन्सर्ट करेंगे। इस चाइल्ड को firstElementChild की मदद से ढूंढा जा सकता है:

<div id="parent">
	<p>elem 1</p>
	<p>elem 2</p>
</div>

let parent = document.querySelector('#parent');

let p = document.createElement('p');
p.textContent = '!';

parent.insertBefore(p, parent.firstElementChild);

कोड एक्सेक्यूट करने का रिजल्ट:

<div id="parent">
	<p>!</p>
	<p>elem 1</p>
	<p>elem 2</p>
</div>

उदाहरण

null को दूसरे पैरामीटर के रूप में पास करने पर insertBefore मेथड appendChild की तरह काम करता है। साथ ही, अगर एलिमेंट में कोई चाइल्ड एलिमेंट नहीं है, तो firstElementChild null रिटर्न करता है। नतीजतन, एलिमेंट की शुरुआत में तब भी जोड़ा जा सकता है, जब उसमें कोई चाइल्ड एलिमेंट नहीं होते:

<div id="parent"></div>

let parent = document.querySelector('#parent');

let p = document.createElement('p');
p.textContent = '!';

parent.insertBefore(p, parent.firstChild);

कोड एक्सेक्यूट करने का रिजल्ट:

<div id="parent">
	<p>!</p>
</div>

यह भी देखें

prepend मेथड,
जो एलिमेंट्स को शुरुआत में इन्सर्ट करता है
appendChild मेथड,
जो एलिमेंट्स को पेरेंट के अंत में इन्सर्ट करता है
insertAdjacentElement मेथड,
जो एलिमेंट को निर्धारित जगह पर इन्सर्ट करता है
insertAdjacentHTML मेथड,
जो टैग्स को निर्धारित जगह पर इन्सर्ट करता है