Njia ya prepend

Njia prepend inaruhusu kuingiza mwanzoni mwa kipengele fulani kipengele kingine. Kigezo cha njia huchukua kipengele, kwa kawaida kilichoundwa kupitia createElement, au mfuatano. Inaweza kuongeza vipengele vya mara moja viwili au zaidi au mifuatano, kwa kuviorodhesha kwa kutumia koma.

Sintaksia

mzazi.prepend(kipengele au mfuatano);

Mfano

Wacha tuunde aya, tuweke maandishi yake na tuiweke kwenye ukurasa mwanzoni mwa kizuizi #parent:

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

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

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

parent.prepend(p);

Matokeo ya utekelezaji wa kodi:

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

Mfano

Wacha tuweke aya mbili mara moja mwanzoni mwa kizuizi #parent:

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

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

let p1 = document.createElement('p');
p1.textContent = 'a';

let p2 = document.createElement('p');
p2.textContent = 'b';

parent.prepend(p1, p2);

Matokeo ya utekelezaji wa kodi:

<div id="parent">
	<p>b</p>
	<p>a</p>
	<p>1</p>
	<p>2</p>
	<p>3</p>
</div>

Mfano

Wacha tutumie mfuatano kama kigezo cha njia:

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

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

Matokeo ya utekelezaji wa kodi:

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

Angalia pia

njia append,
ambayo huingiza vipengele mwishoni
njia appendChild,
ambayo huingiza vipengele mwishoni
njia insertBefore,
ambayo huingiza kipengele kabla ya kipengele
njia insertAdjacentElement,
ambayo huingiza kipengele mahali paliopangwa
njia insertAdjacentHTML,
ambayo huingiza vitich