Metod insertAdjacentHTML

Metod insertAdjacentHTML omogućava umetanje stringa HTML koda na bilo koje mesto na stranici. Kod se umeće u odnosu na referentni element. Možete izvršiti umetanje ispred referentnog elementa (način umetanja 'beforeBegin'), nakon 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.insertAdjacentHTML(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 target = document.querySelector('#target');
target.insertAdjacentHTML('beforeBegin', '<p>!</p>');

Rezultat izvršavanja koda:

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

Primer . Način afterEnd

A sada umetnimo novi pasus nakon referentnog elementa:

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

javascriptlet target = document.querySelector('#target');
target.insertAdjacentHTML('afterEnd', '<p>!</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 target = document.querySelector('#target');
target.insertAdjacentHTML('afterBegin', '<p>!</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 target = document.querySelector('#target');
target.insertAdjacentHTML('beforeEnd', '<p>!</p>');

Rezultat izvršavanja koda:

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

Videti takođe