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

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

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

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

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

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

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

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

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

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

Výsledek provedení kódu:

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

Viz také

metoda insertAdjacentText,
která vkládá text na zadané místo
metoda insertAdjacentElement,
která vkládá prvek na zadané místo
metoda prepend,
která vkládá prvky na začátek
metoda append,
která vkládá prvky na konec
metoda appendChild,
která vkládá prvky na konec rodiče
metoda insertBefore,
která vkládá prvky před prvek