Metoden insertBefore

Metoden insertBefore giver mulighed for at indsætte et element før et andet element. Den bruges mest ofte efter oprettelse af et element med createElement. Metoden anvendes på forælderen til det element, som indsættelsen sker før.

Syntaks

forælder.insertBefore(element, før hvem der skal indsættes);

Eksempel

Lad os oprette et afsnit og placere det før det andet afsnit:

<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 af udførelse af koden:

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

Eksempel

Lad os tilføje et afsnit i starten af elementet #parent. For at gøre dette indsætter vi vores afsnit før det første barnelement #parent. Dette barnelement kan findes ved hjælp af 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 af udførelse af koden:

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

Eksempel

Når den anden parameter null sendes, virker metoden insertBefore som appendChild. På samme tid, hvis elementet ikke har nogen underordnede elementer, returnerer firstElementChild null. Derfor kan tilføjelse i starten af elementet også ske, selv når det ikke har nogen underordnede elementer:

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

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

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

parent.insertBefore(p, parent.firstChild);

Resultatet af udførelse af koden:

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

Se også

metoden prepend,
som indsætter elementer i starten
metoden appendChild,
som indsætter elementer i slutningen af forælderen
metoden insertAdjacentElement,
som indsætter et element på det angivne sted
metoden insertAdjacentHTML,
som indsætter tags på det angivne sted