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

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

Eksempel

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

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

Resultatet av å kjøre koden:

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

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

Resultatet av å kjøre koden:

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

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

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

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

parent.insertBefore(p, parent.firstChild);

Resultatet av å kjøre koden:

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

Se også