Metóda insertAdjacentHTML

Metóda insertAdjacentHTML umožňuje vložiť reťazec HTML kódu na akékoľvek miesto stránky. Kód sa vkladá relatívne k referenčnému prvku. Je možné vykonať vloženie pred referenčný prvok (spôsob vloženia 'beforeBegin'), po ňom (spôsob vloženia 'afterEnd'), ako aj na začiatok (spôsob vloženia 'afterBegin') alebo na koniec (spôsob vloženia 'beforeEnd') referenčného prvku.

Syntax

javascriptreferenčný prvok.insertAdjacentHTML(spôsob vloženia, kód na vloženie);

Príklad . Spôsob beforeBegin

Nech referenčný prvok je prvok #target. Vložme pred neho nový odsek:

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

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

Výsledok vykonania kódu:

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

Príklad . Spôsob afterEnd

A teraz vložme nový odsek za referenčný prvok:

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

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

Výsledok vykonania kódu:

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

Príklad . Spôsob afterBegin

Vložme nový odsek na začiatok referenčného prvku:

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

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

Výsledok vykonania kódu:

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

Príklad . Spôsob beforeEnd

Vložme nový odsek na koniec referenčného prvku:

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

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

Výsledok vykonania kódu:

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

Pozri tiež