insertAdjacentHTML मेथड

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

सिंटैक्स

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

उदाहरण . beforeBegin मोड

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

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

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

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

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

उदाहरण . afterEnd मोड

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

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

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

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

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

उदाहरण . afterBegin मोड

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

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

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

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

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

उदाहरण . beforeEnd मोड

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

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

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

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

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

यह भी देखें