insertBefore ක්රමය
insertBefore ක්රමය එක් මූලද්රව්යයක් තවත් මූලද්රව්යයකට පෙර ඇතුළු කිරීමට ඉඩ සලසයි.
බොහෝ විට භාවිතා වන්නේ
createElement භාවිතයෙන් මූලද්රව්යයක් සෑදීමෙන් පසුවය.
මෙම ක්රමය යොදන්නේ ඇතුළු කිරීම සිදුවන මූලද්රව්යයට පෙර ඇති මූලද්රව්යයේ දෙමාපියටය.
වාග් රීතිය
දෙමාපිය.insertBefore(මූලද්රව්යය, කුමන ඉදිරියේ ඇතුල් කරන්නද);
උදාහරණය
අපි ඡේදයක් සාදා එය දෙවන ඡේදයට පෙර තබමු:
<div id="parent">
<p>මූලද්රව්ය 1</p>
<p id="before">මූලද්රව්ය 2</p>
<p>මූලද්රව්ය 3</p>
</div>
let parent = document.querySelector('#parent');
let before = document.querySelector('#before');
let p = document.createElement('p');
p.textContent = '!';
parent.insertBefore(p, before);
කේතය ක්රියාත්මක කිරීමේ ප්රතිඵලය:
<div id="parent">
<p>මූලද්රව්ය 1</p>
<p>!</p>
<p>මූලද්රව්ය 2</p>
<p>මූලද්රව්ය 3</p>
</div>
උදාහරණය
අපි #parent මූලද්රව්යයේ ආරම්භයට ඡේදයක් එකතු කරමු.
මේ සඳහා අපගේ ඡේදය #parent හි පළමු
ළමා මූලද්රව්යයට පෙර ඇතුළු කරමු. මෙම ළමා මූලද්රව්යය
firstElementChild භාවිතයෙන් සොයා ගත හැකිය:
<div id="parent">
<p>මූලද්රව්ය 1</p>
<p>මූලද්රව්ය 2</p>
</div>
let parent = document.querySelector('#parent');
let p = document.createElement('p');
p.textContent = '!';
parent.insertBefore(p, parent.firstElementChild);
කේතය ක්රියාත්මක කිරීමේ ප්රතිඵලය:
<div id="parent">
<p>!</p>
<p>මූලද්රව්ය 1</p>
<p>මූලද්රව්ය 2</p>
</div>
උදාහරණය
null දෙවන පරාමිතියක් ලෙස යොමු කරන විට
insertBefore ක්රමය
appendChild ලෙස ක්රියා කරයි.
ඒ අතරම, මූලද්රව්යයකට ළමා මූලද්රව්ය
නොමැති නම්, firstElementChild
null ලෙස ආපසු එවයි. එබැවින්, මූලද්රව්යයේ ආරම්භයට
එකතු කිරීමට හැකි වන්නේ එහි ළමා මූලද්රව්ය
නොමැති විට පවා:
<div id="parent"></div>
let parent = document.querySelector('#parent');
let p = document.createElement('p');
p.textContent = '!';
parent.insertBefore(p, parent.firstChild);
කේතය ක්රියාත්මක කිරීමේ ප්රතිඵලය:
<div id="parent">
<p>!</p>
</div>
මෙයද බලන්න
-
prependක්රමය,
මූලද්රව්ය ආරම්භයට ඇතුළු කරයි -
appendChildක්රමය,
මූලද්රව්ය දෙමාපියාගේ අවසානයට ඇතුළු කරයි -
insertAdjacentElementක්රමය,
මූලද්රව්යයක් නිශ්චිත ස්ථානයකට ඇතුළු කරයි -
insertAdjacentHTMLක්රමය,
ටැග නිශ්චිත ස්ථානයකට ඇතුළු කරයි
