De insertAdjacentHTML-methode

De methode insertAdjacentHTML maakt het mogelijk om een string met HTML-code op elke gewenste plek op de pagina in te voegen. De code wordt ingevoegd ten opzichte van een referentie-element. Het is mogelijk om de code vóór het referentie-element in te voegen (invoegmethode 'beforeBegin'), na het referentie-element (invoegmethode 'afterEnd'), of aan het begin (invoegmethode 'afterBegin') of aan het einde (invoegmethode 'beforeEnd') van het referentie-element.

Syntaxis

referentieElement.insertAdjacentHTML(invoegmethode, inTeVoegenCode);

Voorbeeld . Methode beforeBegin

Stel, het referentie-element is het element #target. Laten we een nieuwe alinea ervoor invoegen:

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

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

Resultaat van de uitgevoerde code:

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

Voorbeeld . Methode afterEnd

Laten we nu een nieuwe alinea na het referentie-element invoegen:

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

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

Resultaat van de uitgevoerde code:

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

Voorbeeld . Methode afterBegin

Laten we een nieuwe alinea aan het begin van het referentie-element invoegen:

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

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

Resultaat van de uitgevoerde code:

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

Voorbeeld . Methode beforeEnd

Laten we een nieuwe alinea aan het einde van het referentie-element invoegen:

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

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

Resultaat van de uitgevoerde code:

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

Zie ook

methode insertAdjacentText,
die tekst op een gespecificeerde plek invoegt
methode insertAdjacentElement,
die een element op een gespecificeerde plek invoegt
methode prepend,
die elementen aan het begin invoegt
methode append,
die elementen aan het einde invoegt
methode appendChild,
die elementen aan het einde van de ouder invoegt
methode insertBefore,
die elementen vóór een element invoegt