insertAdjacentElement विधि

insertAdjacentElement विधि पृष्ठ पर किसी भी स्थान पर एक तत्व डालने की अनुमति देती है। यह अक्सर createElement के साथ एक तत्व बनाने के बाद उपयोग की जाती है। कोड को संदर्भ तत्व के सापेक्ष डाला जाता है। आप संदर्भ तत्व के पहले डाल सकते हैं (डालने की विधि beforeBegin), उसके बाद (डालने की विधि afterEnd), और संदर्भ त元素的 की शुरुआत में (डालने की विधि afterBegin) या अंत में (डालने की विधि beforeEnd) भी डाल सकते हैं।

वाक्य - विन्यास

javascriptसंदर्भ तत्व.insertAdjacentElement(डालने की विधि, डालने के लिए कोड);

उदाहरण . विधि beforeBegin

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

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

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

let target = document.querySelector('#target');
target.insertAdjacentElement('beforeBegin', p);

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

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

उदाहरण . विधि afterEnd

और अब संदर्भ तत्व के बाद एक नया पैराग्राफ डालें:

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

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

let target = document.querySelector('#target');
target.insertAdjacentElement('afterEnd', p);

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

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

उदाहरण . विधि afterBegin

संदर्भ तत्व की शुरुआत में एक नया पैराग्राफ डालें:

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

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

let target = document.querySelector('#target');
target.insertAdjacentElement('afterBegin', p);

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

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

उदाहरण . विधि beforeEnd

संदर्भ तत्व के अंत में एक नया पैराग्राफ डालें:

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

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

let target = document.querySelector('#target');
target.insertAdjacentElement('beforeEnd', p);

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

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

यह भी देखें