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

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

Mfano

Tutundue aya na kuiweka kabla ya aya ya pili:

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

let 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:

<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:

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

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

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

parent.insertBefore(p, parent.firstElementChild);

Matokeo ya utekelezaji wa msimbo:

<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:

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

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

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

parent.insertBefore(p, parent.firstChild);

Matokeo ya utekelezaji wa msimbo:

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

Angalia pia

mbinu prepend,
ambayo inaingiza vipengele mwanzoni
mbinu appendChild,
ambayo inaingiza vipengele mwishoni mwa mzazi
mbinu insertAdjacentElement,
ambayo inaingiza kipengele mahali palipowekwa
mbinu insertAdjacentHTML,
ambayo inaingiza vitichati mahali palipowekwa