Mbinu ya insertBefore

Mbinu insertBefore inaruhusu kuingiza kipengele kabla ya kipengele kingine. Mara nyingi hutumiwa baada ya kuunda kipengele kwa kutumia createElement. Mbinu hutumika kwa mzazi wa kipengele hicho, kabla ya hicho kipengele ndio kuingizwa.

Syntax

javascriptmzazi.insertBefore(kipengele, kuweka mbele ya nani);

Mfano

Tutundue aya na kuiweka kabla ya aya ya pili:

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

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

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

parent.insertBefore(p, before);

Matokeo ya utekelezaji wa msimbo:

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

Mfano

Wacha tuongeze aya mwanzoni mwa kipengele #parent. Kwa hili tutaingiza aya yetu kabla ya mtoto wa kwanza wa #parent. Mtoto huyu anaweza kupatikana kwa kutumia firstElementChild:

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

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

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

parent.insertBefore(p, parent.firstElementChild);

Matokeo ya utekelezaji wa msimbo:

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

Mfano

Wakati wa kupitisha parameta ya pili null mbinu insertBefore hufanya kazi kama appendChild. Wakati huo huo, ikiwa kipengele hakina watoto wa vipengele, firstElementChild hurudisha null. Kwa hivyo, kuongeza mwanzoni mwa kipengele kunawezekana hata wakati hakuna watoto wa vipengele ndani yake:

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

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

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

parent.insertBefore(p, parent.firstChild);

Matokeo ya utekelezaji wa msimbo:

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

Angalia pia