insertBefore နည်းလမ်း

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

ဝါကျဖွဲ့ပုံ

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

နမူနာ

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

html<div id="parent">
  <p>အစိတ်အပိုင်း ၁</p>
  <p id="before">အစိတ်အပိုင်း ၂</p>
  <p>အစိတ်အပိုင်း ၃</p>
</div>

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

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

parent.insertBefore(p, before);

ကုဒ်အလုပ်လုပ်ဆောင်မှု၏ ရလဒ်။

html<div id="parent">
  <p>အစိတ်အပိုင်း ၁</p>
  <p>!</p>
  <p>အစိတ်အပိုင်း ၂</p>
  <p>အစိတ်အပိုင်း ၃</p>
</div>

နမူနာ

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

html<div id="parent">
  <p>အစိတ်အပိုင်း ၁</p>
  <p>အစိတ်အပိုင်း ၂</p>
</div>

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

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

parent.insertBefore(p, parent.firstElementChild);

ကုဒ်အလုပ်လုပ်ဆောင်မှု၏ ရလဒ်။

html<div id="parent">
  <p>!</p>
  <p>အစိတ်အပိုင်း ၁</p>
  <p>အစိတ်အပိုင်း ၂</p>
</div>

နမူနာ

ဒုတိယအကြောင်းပြချက် အဖြစ် null ကို ပေးသောအခါ insertBefore နည်းလမ်းသည် appendChild အဖြစ် အလုပ်လုပ်သည်။ အလားတူစွာ၊ အကယ်၍ အစိတ်အပိုင်းတွင် မည်သည့်ကလေးအစိတ်အပိုင်းမျှ မရှိပါက firstElementChild သည် null ကို ပြန်ပေးသည်။ ထို့ကြောင့် ၎င်းတွင် ကလေးအစိတ်အပိုင်းများ မရှိသည့်အချိန်တွင်ပင် အစိတ်အပိုင်း၏ ထိပ်ဆုံးသို့ ထည့်သွင်းနိုင်ပါသည်။

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

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

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

parent.insertBefore(p, parent.firstChild);

ကုဒ်အလုပ်လုပ်ဆောင်မှု၏ ရလဒ်။

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

ဆက်စပ်ကြည့်ရှုရန်