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

referenč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:

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

let target = document.querySelector('#target');
target.insertAdjacentHTML('beforeBegin', '<p>!</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ý prvok:

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

let target = document.querySelector('#target');
target.insertAdjacentHTML('afterEnd', '<p>!</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 prvku:

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

let target = document.querySelector('#target');
target.insertAdjacentHTML('afterBegin', '<p>!</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 prvku:

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

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

Výsledok vykonania kódu:

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

Pozri tiež

metóda insertAdjacentText,
ktorá vkladá text na určené miesto
metóda insertAdjacentElement,
ktorá vkladá prvok na určené miesto
metóda prepend,
ktorá vkladá prvky na začiatok
metóda append,
ktorá vkladá prvky na koniec
metóda appendChild,
ktorá vkladá prvky na koniec rodiča
metóda insertBefore,
ktorá vkladá prvky pred prvok