Metod insertAdjacentElement

Metod insertAdjacentElement omogućava umetanje elementa na bilo koje mesto stranice. Najčešće se koristi nakon kreiranja elementa pomoću createElement. Kod se umeće u odnosu na referentni element. Može se izvršiti umetanje ispred referentnog elementa (način umetanja beforeBegin), posle njega (način umetanja afterEnd), kao i na početak (način umetanja afterBegin) ili na kraj (način umetanja beforeEnd) referentnog elementa.

Sintaksa

javascriptreferentni element.insertAdjacentElement(način umetanja, kod za umetanje);

Primer . Način beforeBegin

Neka je referentni element element #target. Umetnimo ispred njega novi pasus:

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

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

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

Rezultat izvršavanja koda:

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

Primer . Način afterEnd

A sada umetnimo novi pasus posle referentnog elementa:

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

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

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

Rezultat izvršavanja koda:

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

Primer . Način afterBegin

Umetnimo novi pasus na početak referentnog elementa:

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

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

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

Rezultat izvršavanja koda:

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

Primer . Način beforeEnd

Umetnimo novi pasus na kraj referentnog elementa:

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

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

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

Rezultat izvršavanja koda:

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

Pogledajte takođe