Metoda insertAdjacentElement

Metoda insertAdjacentElement lejon futjen e një elementi në çdo vend të faqes. Përdoret më shpesh pas krijimit të një elementi me createElement. Kodi futet në raport me elementin referues. Mund të bëhet futja përpara elementit referues (mënyra e futjes beforeBegin), pas tij (mënyra e futjes afterEnd), si dhe në fillim (mënyra e futjes afterBegin) ose në fund (mënyra e futjes beforeEnd) të elementit referues.

Sintaksa

javascriptelementi referues.insertAdjacentElement(mënyra e futjes, kodi për të futur);

Shembull . Mënyra beforeBegin

Le të jetë elementi referues elementi #target. Le të fusim një paragraf të ri përpara tij:

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

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

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

Rezultati i ekzekutimit të kodit:

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

Shembull . Mënyra afterEnd

Tani le të fusim një paragraf të ri pas elementit referues:

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

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

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

Rezultati i ekzekutimit të kodit:

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

Shembull . Mënyra afterBegin

Le të fusim një paragraf të ri në fillim të elementit referues:

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

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

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

Rezultati i ekzekutimit të kodit:

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

Shembull . Mënyra beforeEnd

Le të fusim një paragraf të ri në fund të elementit referues:

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

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

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

Rezultati i ekzekutimit të kodit:

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

Shihni gjithashtu