Meetod insertBefore

Meetod insertBefore võimaldab lisada elemendi enne teist elementi. Kõige sagedamini kasutatakse seda peale elemendi loomist meetodiga createElement. Meetodit rakendatakse selle elemendi vanemale, enne mida lisamine toimub.

Süntaks

javascriptvanem.insertBefore(element, enne keda lisada);

Näide

Loome lõigu ja asetame selle teise lõigu ette:

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

Koodi täitmise tulemus:

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

Näide

Lisame lõigu elemendi #parent algusesse. Selleks lisame oma lõigu enne #parent esimest last. Selle lapse leiab abiga 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);

Koodi täitmise tulemus:

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

Näide

Kui teiseks parameetriks edastada null, siis meetod insertBefore toimib nagu appendChild. Samal ajal, kui elemendil pole lapsi, tagastab firstElementChild null. Seega on elemendi algusesse lisamine võimalik isegi siis, kui sellel pole lapsi:

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

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

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

parent.insertBefore(p, parent.firstChild);

Koodi täitmise tulemus:

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

Vaata ka