Metoden insertAdjacentHTML

Metoden insertAdjacentHTML låter dig infoga en sträng med HTML-kod var som helst på sidan. Koden infogas i förhållande till ett referenselement. Du kan infoga före referenselementet (infogningssätt 'beforeBegin'), efter det (infogningssätt 'afterEnd'), samt i början (infogningssätt 'afterBegin') eller i slutet (infogningssätt 'beforeEnd') av referenselementet.

Syntax

referenselement.insertAdjacentHTML(infogningssätt, kod att infoga);

Exempel . Sättet beforeBegin

Låt referenselementet vara elementet #target. Låt oss infoga ett nytt stycke före det:

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

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

Resultat av exekveringen av koden:

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

Exempel . Sättet afterEnd

Låt oss nu infoga ett nytt stycke efter referenselementet:

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

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

Resultat av exekveringen av koden:

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

Exempel . Sättet afterBegin

Låt oss infoga ett nytt stycke i början av referenselementet:

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

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

Resultat av exekveringen av koden:

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

Exempel . Sättet beforeEnd

Låt oss infoga ett nytt stycke i slutet av referenselementet:

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

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

Resultat av exekveringen av koden:

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

Se även

metoden insertAdjacentText,
som infogar text på en angiven plats
metoden insertAdjacentElement,
som infogar ett element på en angiven plats
metoden prepend,
som infogar element i början
metoden append,
som infogar element i slutet
metoden appendChild,
som infogar element i slutet av ett föräldraelement
metoden insertBefore,
som infogar element före ett element