Az insertBefore metódus

Az insertBefore metódus lehetővé teszi egy elem beszúrását egy másik elem elé. Leggyakrabban az createElement segítségével létrehozott elemek után használják. A metódust annak a szülőnek kell meghívni, amelyik eleme elé beszúrás történik.

Szintaxis

javascriptszülő.insertBefore(elem, elé kell szúrni);

Példa

Hozzunk létre egy bekezdést és helyezzük a második bekezdés elé:

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

A kód végrehajtásának eredménye:

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

Példa

Adjunk hozzá egy bekezdést a #parent elem elejéhez. Ehhez a bekezdést a #parent első gyermeke elé szúrjuk be. Ezt a gyermeket a firstElementChild segítségével találhatjuk meg:

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

A kód végrehajtásának eredménye:

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

Példa

Ha a második paraméterként null-t adunk át, a insertBefore metódus úgy viselkedik, mint az appendChild. Ugyanakkor, ha egy elemnek nincsenek gyermek elemei, a firstElementChild null-t ad vissza. Következésképpen, az elem elejéhez adhatunk hozzá még akkor is, ha nincsenek gyermek elemei:

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

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

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

parent.insertBefore(p, parent.firstChild);

A kód végrehajtásának eredménye:

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

Lásd még