Metoda insertAdjacentElement

Metoda insertAdjacentElement umožňuje vložit element na libovolné místo stránky. Nejčastěji se používá po vytvoření elementu pomocí createElement. Kód se vkládá relativně k referenčnímu elementu. Lze provést vložení před referenční element (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 elementu.

Syntaxe

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

Příklad . Způsob beforeBegin

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

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

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

let target = document.querySelector('#target');
target.insertAdjacentElement('beforeBegin', 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í element:

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

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

let target = document.querySelector('#target');
target.insertAdjacentElement('afterEnd', 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 elementu:

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

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

let target = document.querySelector('#target');
target.insertAdjacentElement('afterBegin', 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 elementu:

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

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

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

Výsledek provedení kódu:

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

Viz také