Metoden insertAdjacentHTML

Metoden insertAdjacentHTML tillater innsetting av en streng med HTML-kode hvor som helst på siden. Koden settes inn i forhold til et referanseelement. Man kan sette inn før referanseelementet (innsettingsmåte 'beforeBegin'), etter det (innsettingsmåte 'afterEnd'), samt i begynnelsen (innsettingsmåte 'afterBegin') eller på slutten (innsettingsmåte 'beforeEnd') av referanseelementet.

Syntaks

referanseelement.insertAdjacentHTML(innsettingsmåte, kode for innsetting);

Eksempel . Måten beforeBegin

La referanseelementet være elementet #target. La oss sette inn et nytt avsnitt før det:

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

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

Resultat av kjøring av kode:

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

Eksempel . Måten afterEnd

La oss nå sette inn et nytt avsnitt etter referanseelementet:

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

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

Resultat av kjøring av kode:

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

Eksempel . Måten afterBegin

La oss sette inn et nytt avsnitt i begynnelsen av referanseelementet:

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

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

Resultat av kjøring av kode:

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

Eksempel . Måten beforeEnd

La oss sette inn et nytt avsnitt på slutten av referanseelementet:

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

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

Resultat av kjøring av kode:

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

Se også

metoden insertAdjacentText,
som setter inn tekst på angitt sted
metoden insertAdjacentElement,
som setter inn et element på angitt sted
metoden prepend,
som setter inn elementer i begynnelsen
metoden append,
som setter inn elementer på slutten
metoden appendChild,
som setter inn elementer på slutten av forelderen
metoden insertBefore,
som setter inn elementer før et element