Az insertAdjacentHTML metódus

A insertAdjacentHTML metódus lehetővé teszi egy HTML kód sztring beszúrását a weboldal bármely pontjára. A kód a referenciaelemhez viszonyítva kerül beszúrásra. Lehetőség van a beszúrásra a referenciaelem elé (beszúrási mód 'beforeBegin'), utána (beszúrási mód 'afterEnd'), valamint a referenciaelem elejére (beszúrási mód 'afterBegin') vagy végére (beszúrási mód 'beforeEnd').

Szintaxis

referencia elem.insertAdjacentHTML(beszúrási mód, beszúrandó kód);

Példa . beforeBegin mód

Legyen a referenciaelem a #target elem. Szúrjunk be elé egy új bekezdést:

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

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

A kód végrehajtásának eredménye:

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

Példa . afterEnd mód

Most pedig szúrjunk be egy új bekezdést a referenciaelem után:

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

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

A kód végrehajtásának eredménye:

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

Példa . afterBegin mód

Szúrjunk be egy új bekezdést a referenciaelem elejére:

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

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

A kód végrehajtásának eredménye:

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

Példa . beforeEnd mód

Szúrjunk be egy új bekezdést a referenciaelem végére:

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

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

A kód végrehajtásának eredménye:

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

Lásd még

a insertAdjacentText metódus,
amely szöveget szúr be a megadott helyre
a insertAdjacentElement metódus,
amely elemet szúr be a megadott helyre
a prepend metódus,
amely elemeket szúr be az elejére
a append metódus,
amely elemeket szúr be a végére
a appendChild metódus,
amely elemeket szúr be a szülő végére
a insertBefore metódus,
amely elemeket szúr be egy elem elé