Metoda insertBefore

Metoda insertBefore umožňuje vložit prvek před jiný prvek. Nejčastěji se používá po vytvoření prvku pomocí createElement. Metoda se aplikuje na rodiče toho prvku, před kterým dojde k vložení.

Syntaxe

javascriptrodič.insertBefore(prvek, před kým vložit);

Příklad

Vytvoříme odstavec a umístíme jej před druhý odstavec:

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

Výsledek provedení kódu:

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

Příklad

Přidáme odstavec na začátek prvku #parent. K tomu vložíme náš odstavec před prvního potomka #parent. Tohoto potomka lze najít pomocí 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);

Výsledek provedení kódu:

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

Příklad

Při předání druhým parametrem null metoda insertBefore funguje jako appendChild. Zároveň, pokud prvek nemá podřízené prvky, firstElementChild vrací null. Proto lze přidávat na začátek prvku i tehdy, když v něm nejsou žádné podřízené prvky:

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

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

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

parent.insertBefore(p, parent.firstChild);

Výsledek provedení kódu:

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

Viz také