Metoden insertBefore

Metoden insertBefore låter dig infoga ett element före ett annat element. Används oftast efter att ha skapat ett element med createElement. Metoden appliceras på föräldern till det element som infogas före.

Syntax

förälder.insertBefore(element, före vem infogas);

Exempel

Låt oss skapa ett stycke och placera det före det andra stycket:

<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);

Resultat av exekveringen av koden:

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

Exempel

Låt oss lägga till ett stycke i början av elementet #parent. För att göra detta infogar vi vårt stycke före det första barnet till #parent. Detta barn kan hittas med hjälp 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);

Resultat av exekveringen av koden:

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

Exempel

När den andra parametern null skickas, fungerar metoden insertBefore som appendChild. Samtidigt, om elementet inte har några child- element, returnerar firstElementChild null. Följaktligen kan man lägga till i början av elementet även när det inte har några child- element:

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

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

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

parent.insertBefore(p, parent.firstChild);

Resultat av exekveringen av koden:

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

Se även

metoden prepend,
som infogar element i början
metoden appendChild,
som infogar element i slutet av föräldern
metoden insertAdjacentElement,
som infogar ett element på en angiven plats
metoden insertAdjacentHTML,
som infogar taggar på en angiven plats