insertAdjacentHTML मेथड

insertAdjacentHTML मेथड पेज पर कहीं भी HTML कोड की स्ट्रिंग इंसर्ट करने की अनुमति देता है। कोड रेफरेंस एलिमेंट के रिलेटिव इंसर्ट किया जाता है। रेफरेंस एलिमेंट से पहले इंसर्ट किया जा सकता है (इंसर्शन मोड 'beforeBegin'), उसके बाद (इंसर्शन मोड 'afterEnd'), और साथ ही शुरुआत में (इंसर्शन मोड 'afterBegin') या अंत में (इंसर्शन मोड 'beforeEnd') रेफरेंस एलिमेंट के।

सिंटैक्स

रेफरेंस एलिमेंट.insertAdjacentHTML(इंसर्शन मोड, इंसर्ट करने के लिए कोड);

उदाहरण . beforeBegin मोड

मान लें कि रेफरेंस एलिमेंट #target एलिमेंट है। इससे पहले एक नया पैराग्राफ इंसर्ट करते हैं:

<div id="target">
	<p>elem</p>
</div>

let target = document.querySelector('#target');
target.insertAdjacentHTML('beforeBegin', '<p>!</p>');

कोड निष्पादित करने का परिणाम:

<p>!</p>
<div id="target">
	<p>elem</p>
</div>

उदाहरण . afterEnd मोड

और अब रेफरेंस एलिमेंट के बाद एक नया पैराग्राफ इंसर्ट करते हैं:

<div id="target">
	<p>elem</p>
</div>

let target = document.querySelector('#target');
target.insertAdjacentHTML('afterEnd', '<p>!</p>');

कोड निष्पादित करने का परिणाम:

<div id="target">
	<p>elem</p>
</div>
<p>!</p>

उदाहरण . afterBegin मोड

रेफरेंस एलिमेंट की शुरुआत में एक नया पैराग्राफ इंसर्ट करते हैं:

<div id="target">
	<p>elem</p>
</div>

let target = document.querySelector('#target');
target.insertAdjacentHTML('afterBegin', '<p>!</p>');

कोड निष्पादित करने का परिणाम:

<div id="target">
	<p>!</p>
	<p>elem</p>
</div>

उदाहरण . beforeEnd मोड

रेफरेंस एलिमेंट के अंत में एक नया पैराग्राफ इंसर्ट करते हैं:

<div id="target">
	<p>elem</p>
</div>

let target = document.querySelector('#target');
target.insertAdjacentHTML('beforeEnd', '<p>!</p>');

कोड निष्पादित करने का परिणाम:

<div id="target">
	<p>elem</p>
	<p>!</p>
</div>

यह भी देखें

insertAdjacentText मेथड,
जो टेक्स्ट को निर्दिष्ट स्थान पर इंसर्ट करता है
insertAdjacentElement मेथड,
जो एलिमेंट को निर्दिष्ट स्थान पर इंसर्ट करता है
prepend मेथड,
जो एलिमेंट्स को शुरुआत में इंसर्ट करता है
append मेथड,
जो एलिमेंट्स को अंत में इंसर्ट करता है
appendChild मेथड,
जो एलिमेंट्स को पैरेंट के अंत में इंसर्ट करता है
insertBefore मेथड,
जो एलिमेंट्स को एलिमेंट से पहले इंसर्ट करता है