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

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

Exempel

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

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

javascriptlet 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:

html<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:

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

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

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

parent.insertBefore(p, parent.firstElementChild);

Resultat av exekveringen av koden:

html<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:

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

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

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

parent.insertBefore(p, parent.firstChild);

Resultat av exekveringen av koden:

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

Se även