Metoda insertAdjacentHTML

Metoda insertAdjacentHTML umožňuje vložit řetězec HTML kódu na libovolné místo stránky. Kód se vkládá relativně k referenčnímu prvku. Lze provést vložení před referenční prvek (způsob vložení 'beforeBegin'), za něj (způsob vložení 'afterEnd'), nebo na začátek (způsob vložení 'afterBegin') nebo na konec (způsob vložení 'beforeEnd') referenčního prvku.

Syntaxe

javascriptreferenční prvek.insertAdjacentHTML(způsob vložení, kód pro vložení);

Příklad . Způsob beforeBegin

Nechť referenční prvek je prvek #target. Vložme před něj nový odstavec:

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

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

Výsledek provedení kódu:

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

Příklad . Způsob afterEnd

A nyní vložme nový odstavec za referenční prvek:

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

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

Výsledek provedení kódu:

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

Příklad . Způsob afterBegin

Vložme nový odstavec na začátek referenčního prvku:

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

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

Výsledek provedení kódu:

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

Příklad . Způsob beforeEnd

Vložme nový odstavec na konec referenčního prvku:

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

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

Výsledek provedení kódu:

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

Viz také