insertBefore နည်းလမ်း

insertBefore နည်းလမ်းသည် အခြားအစိတ်အပိုင်းတစ်ခု၏ ရှေ့တွင် အစိတ်အပိုင်းတစ်ခုကို ထည့်သွင်းရန် ခွင့်ပြုပေးသည်။ အများအားဖြင့် createElement ကို အသုံးပြု၍ အစိတ်အပိုင်းအသစ်ဖန်တီးပြီးနောက်တွင် အသုံးပြုလေ့ရှိသည်။ ဤနည်းလမ်းကို မည်သည့်အစိတ်အပိုင်း၏ ရှေ့တွင် ထည့်သွင်းမည်ဆိုသည့် ထိုအစိတ်အပိုင်း၏ မိဘအပေါ်တွင် သက်ရောက်စေပါသည်။

ဝါကျဖွဲ့ပုံ

မိဘ.insertBefore(အစိတ်အပိုင်း, မည်သည့်အရာ၏ ရှေ့တွင် ထည့်မည်နည်း);

နမူနာ

အောက်ပါကုဒ်သည် စာပိုဒ်တစ်ခုကို ဖန်တီးပြီး ၎င်းအား ဒုတိယမြောက် စာပိုဒ်၏ ရှေ့တွင် ထားရှိမည်ဖြစ်သည်။

<div id="parent">
	<p>အစိတ်အပိုင်း ၁</p>
	<p id="before">အစိတ်အပိုင်း ၂</p>
	<p>အစိတ်အပိုင်း ၃</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>အစိတ်အပိုင်း ၁</p>
	<p>!</p>
	<p>အစိတ်အပိုင်း ၂</p>
	<p>အစိတ်အပိုင်း ၃</p>
</div>

နမူနာ

#parent အစိတ်အပိုင်း၏ ထိပ်ဆုံးသို့ စာပိုဒ်တစ်ခု ထည့်သွင်းကြည့်ပါမည်။ ၎င်းအတွက် ကျွန်ုပ်တို့၏ စာပိုဒ်အား #parent ၏ ပထမဆုံးကလေး၏ ရှေ့တွင် ထည့်သွင်းရမည်။ ဤကလေးအား firstElementChild ကို အသုံးပြု၍ ရှာဖွေနိုင်ပါသည်။

<div id="parent">
	<p>အစိတ်အပိုင်း ၁</p>
	<p>အစိတ်အပိုင်း ၂</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>အစိတ်အပိုင်း ၁</p>
	<p>အစိတ်အပိုင်း ၂</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 နည်းလမ်း,
tag များကို သတ်မှတ်ထားသောနေရာတွင် ထည့်သွင်းပေးသည်