prepend ක්‍රමය

prepend ක්‍රමය එක් අංගයක ආරම්භයට වෙනත් අංගයක් ඇතුල් කිරීමට ඉඩ දෙයි. පරාමිතියක් ලෙස මෙම ක්‍රමය අංගයක්, සාමාන්‍යයෙන් නිර්මාණය කරනු ලබන්නේ createElement හරහා, හෝ නූලක් ලෙස පිළිගනී. ක්ෂණිකව බහු අංග හෝ නූල් එකතු කළ හැකිය, කොමාවකින් වෙන් කර ලැයිස්තු ගත කිරීමෙන්.

වාක්‍ය රචනා ක්‍රමය

roditel.prepend(element ili stroka);

උදාහරණය

අපි ඡේදයක් නිර්මාණය කරමු, එයට පාඨය සකසමු සහ පිටුවේ ආරම්භයේ බ්ලොක් එකට තබමු #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);

කේතය ක්‍රියාත්මක කිරීමේ ප්‍රතිඵලය:

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

උදාහරණය

ක්‍ෂණිකව බහු ඡේද බ්ලොක් එකේ ආරම්භයට තබමු #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);

කේතය ක්‍රියාත්මක කිරීමේ ප්‍රතිඵලය:

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

උදාහරණය

ක්‍රමයේ පරාමිතියක් ලෙස නූලක් භාවිතා කරමු:

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

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

කේතය ක්‍රියාත්මක කිරීමේ ප්‍රතිඵලය:

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

මෙයද බලන්න

append ක්‍රමය,
අංග අවසානයට ඇතුල් කරයි
appendChild ක්‍රමය,
අංග අවසානයට ඇතුල් කරයි
insertBefore ක්‍රමය,
අංගයකට පෙර අංගයක් ඇතුල් කරයි
insertAdjacentElement ක්‍රමය,
අංගයක් නියමිත ස්ථානයට ඇතුල් කරයි
insertAdjacentHTML ක්‍රමය,
ටැග නියමිත ස්ථානයට ඇතුල් කරයි