Metoden insertAdjacentHTML

Metoden insertAdjacentHTML gør det muligt at indsætte en streng med HTML-kode hvor som helst på siden. Koden indsættes i forhold til et referenceelement. Det er muligt at indsætte før referenceelementet (indsættelsesmetode 'beforeBegin'), efter det (indsættelsesmetode 'afterEnd'), samt i begyndelsen (indsættelsesmetode 'afterBegin') eller i slutningen (indsættelsesmetode 'beforeEnd') af referenceelementet.

Syntaks

referenceelement.insertAdjacentHTML(indsættelsesmetode, kode til indsættelse);

Eksempel . Metoden beforeBegin

Lad referenceelementet være elementet #target. Lad os indsætte en ny afsnit før det:

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

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

Resultatet af udførelse af koden:

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

Eksempel . Metoden afterEnd

Lad os nu indsætte en ny afsnit efter referenceelementet:

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

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

Resultatet af udførelse af koden:

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

Eksempel . Metoden afterBegin

Lad os indsætte en ny afsnit i begyndelsen af referenceelementet:

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

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

Resultatet af udførelse af koden:

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

Eksempel . Metoden beforeEnd

Lad os indsætte en ny afsnit i slutningen af referenceelementet:

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

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

Resultatet af udførelse af koden:

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

Se også

metoden insertAdjacentText,
som indsætter tekst på et angivet sted
metoden insertAdjacentElement,
som indsætter et element på et angivet sted
metoden prepend,
som indsætter elementer i begyndelsen
metoden append,
som indsætter elementer i slutningen
metoden appendChild,
som indsætter elementer i slutningen af forælderen
metoden insertBefore,
som indsætter elementer før et element