Metoden insertBefore

Metoden insertBefore lar deg sette inn et element før et annet element. Den brukes oftest etter å ha opprettet et element med createElement. Metoden brukes på forelderen til elementet som innsettingen skal skje før.

Syntaks

forelder.insertBefore(element, før hvem du skal sette inn);

Eksempel

La oss opprette et avsnitt og plassere det før det andre avsnittet:

<div id="parent">
	<p>elem 1</p>
	<p id="before">elem 2</p>
	<p>elem 3</p>
</div>

let parent = document.querySelector('#parent');
let before = document.querySelector('#before');

let p = document.createElement('p');
p.textContent = '!';

parent.insertBefore(p, before);

Resultatet av å kjøre koden:

<div id="parent">
	<p>elem 1</p>
	<p>!</p>
	<p>elem 2</p>
	<p>elem 3</p>
</div>

Eksempel

La oss legge til et avsnirt i begynnelsen av elementet #parent. For å gjøre dette setter vi inn avsnittet vårt før det første barnet til #parent. Dette barnet kan finnes ved hjelp av firstElementChild:

<div id="parent">
	<p>elem 1</p>
	<p>elem 2</p>
</div>

let parent = document.querySelector('#parent');

let p = document.createElement('p');
p.textContent = '!';

parent.insertBefore(p, parent.firstElementChild);

Resultatet av å kjøre koden:

<div id="parent">
	<p>!</p>
	<p>elem 1</p>
	<p>elem 2</p>
</div>

Eksempel

Når den andre parameteren er null, oppfører metoden insertBefore seg som appendChild. Samtidig, hvis elementet ikke har noen barne- elementer, returnerer firstElementChild null. Følgelig kan du legge til i begynnelsen av elementet selv når det ikke har noen barne- elementer:

<div id="parent"></div>

let parent = document.querySelector('#parent');

let p = document.createElement('p');
p.textContent = '!';

parent.insertBefore(p, parent.firstChild);

Resultatet av å kjøre koden:

<div id="parent">
	<p>!</p>
</div>

Se også

metoden prepend,
som setter inn elementer i begynnelsen
metoden appendChild,
som setter inn elementer på slutten av forelderen
metoden insertAdjacentElement,
som setter inn et element på et angitt sted
metoden insertAdjacentHTML,
som setter inn tagger på et angitt sted