Metoda insertAdjacentHTML

Metoda insertAdjacentHTML omogoča vstavitev niza HTML kode na katero koli mesto strani. Koda se vstavi glede na referenčni element. Možno je vstaviti pred referenčni element (način vstavljanja 'beforeBegin'), za njim (način vstavljanja 'afterEnd'), pa tudi na začetek (način vstavljanja 'afterBegin') ali na konec (način vstavljanja 'beforeEnd') referenčnega elementa.

Sintaksa

javascriptreferenčni element.insertAdjacentHTML(način vstavljanja, koda za vstavljanje);

Primer . Način beforeBegin

Naj bo referenčni element - element #target. Vstavimo nov odstavek pred njim:

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

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

Rezultat izvajanja kode:

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

Primer . Način afterEnd

Zdaj pa vstavimo nov odstavek za referenčnim elementom:

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

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

Rezultat izvajanja kode:

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

Primer . Način afterBegin

Vstavimo nov odstavek na začetek referenčnega elementa:

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

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

Rezultat izvajanja kode:

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

Primer . Način beforeEnd

Vstavimo nov odstavek na konec referenčnega elementa:

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

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

Rezultat izvajanja kode:

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

Glejte tudi