Metóda insertAdjacentElement
Metóda insertAdjacentElement umožňuje
vložiť element na ľubovoľné miesto stránky.
Najčastejšie sa používa po vytvorení elementu
pomocou createElement.
Kód sa vkladá relatívne k referenčnému
elementu. Je možné vykonať vloženie pred
referenčný element (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 elementu.
Syntax
referenčný element.insertAdjacentElement(spôsob vloženia, kód na vloženie);
Príklad . Spôsob beforeBegin
Nech referenčný element je element #target.
Vložme pred neho nový odsek:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeBegin', p);
Výsledok vykonania kódu:
<p>!</p>
<div id="target">
<p>elem</p>
</div>
Príklad . Spôsob afterEnd
A teraz vložme nový odsek 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ýsledok vykonania kódu:
<div id="target">
<p>elem</p>
</div>
<p>!</p>
Príklad . Spôsob afterBegin
Vložme nový odsek na začiatok 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ýsledok vykonania kódu:
<div id="target">
<p>!</p>
<p>elem</p>
</div>
Príklad . Spôsob beforeEnd
Vložme nový odsek na koniec 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ýsledok vykonania kódu:
<div id="target">
<p>elem</p>
<p>!</p>
</div>
Pozrite tiež
-
metóda
insertAdjacentHTML,
ktorá vkladá značky na určené miesto -
metóda
insertAdjacentText,
ktorá vkladá text na určené miesto -
metóda
prepend,
ktorá vkladá elementy na začiatok -
metóda
append,
ktorá vkladá elementy na koniec -
metóda
appendChild,
ktorá vkladá elementy na koniec rodiča -
metóda
insertBefore,
ktorá vkladá elementy pred element
