insertBefore-metodi

insertBefore-metodi mahdollistaa elementin lisäämisen toisen elementin eteen. Sitä käytetään useimmiten elementin luomisen jälkeen createElement-metodilla. Metodia sovelletaan sen elementin vanhempaan, ennen joka lisäys tapahtuu.

Syntaksi

javascriptvanhempi.insertBefore(elementti, ennen kenntä lisätä);

Esimerkki

Luodaan kappale ja sijoitetaan se toisen kappaleen eteen:

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

Koodin suorituksen tulos:

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

Esimerkki

Lisätään kappale elementin #parent alkuun. Tätä varten lisätään kappaleemme ennen #parent-elementin ensimmäistä lapsielementtiä. Tämä lapsielementti voidaan löytää käyttämällä firstElementChild-metodia:

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

Koodin suorituksen tulos:

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

Esimerkki

Kun toisena parametrina välitetään null, metodi insertBefore toimii kuten appendChild-metodi. Samalla, jos elementissä ei ole lapsi- elementtejä, firstElementChild palauttaa null. Näin ollen alkukohtaan lisääminen onnistuu myös silloin, kun siinä ei ole lapsi- elementtejä:

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

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

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

parent.insertBefore(p, parent.firstChild);

Koodin suorituksen tulos:

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

Katso myös