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
referenč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:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeBegin', p);
Výsledek provedení kódu:
<p>!</p>
<div id="target">
<p>elem</p>
</div>
Příklad . Způsob afterEnd
A nyní vložme nový odstavec za referenční element:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterEnd', p);
Výsledek provedení kódu:
<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:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterBegin', p);
Výsledek provedení kódu:
<div id="target">
<p>!</p>
<p>elem</p>
</div>
Příklad . Způsob beforeEnd
Vložme nový odstavec na konec referenčního elementu:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeEnd', p);
Výsledek provedení kódu:
<div id="target">
<p>elem</p>
<p>!</p>
</div>
Viz také
-
metoda
insertAdjacentHTML,
která vkládá tagy na zadané místo -
metoda
insertAdjacentText,
která vkládá text na zadané místo -
metoda
prepend,
která vkládá elementy na začátek -
metoda
append,
která vkládá elementy na konec -
metoda
appendChild,
která vkládá elementy na konec rodiče -
metoda
insertBefore,
která vkládá elementy před element
