insertAdjacentElement နည်းလမ်း

insertAdjacentElement နည်းလမ်းသည် စာမျက်နှာ၏ မည်သည့်နေရာတွင်မဆို element တစ်ခုထည့်သွင်းရန် ခွင့်ပြုပေးသည်။ createElement ကို အသုံးပြု၍ element ဖန်တီးပြီးနောက် အများဆုံးအသုံးပြုလေ့ရှိသည်။ ကုဒ်ကို အကိုးခံ element နှင့်နှိုင်းယှဉ်၍ ထည့်သွင်းသည်။ အကိုးခံ element ၏ ရှေ့တွင် (ထည့်သွင်းနည်းလမ်း beforeBegin)၊ ၎င်း၏ နောက်တွင် (ထည့်သွင်းနည်းလမ်း afterEnd)၊ ထို့အပြင် အကိုးခံ element ၏ စတင်နေရာတွင် (ထည့်သွင်းနည်းလမ်း afterBegin) သို့မဟုတ် နောက်ဆုံးနေရာတွင် (ထည့်သွင်းနည်းလမ်း beforeEnd) ထည့်သွင်းနိုင်သည်။

Syntax

javascriptအကိုးခံ element.insertAdjacentElement(ထည့်သွင်းနည်းလမ်း, ထည့်သွင်းရန် ကုဒ်);

ဥပမာ . beforeBegin နည်းလမ်း

အကိုးခံ element သည် #target element ဖြစ်ပါစို့။ ၎င်း၏ ရှေ့တွင် paragraph အသစ်တစ်ခုထည့်သွင်းကြပါစို့။

html<div id="target">
  <p>element</p>
</div>

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

let target = document.querySelector('#target');
target.insertAdjacentElement('beforeBegin', p);

ကုဒ် run ပြီးနောက် ရလဒ်။

html<p>!</p>
<div id="target">
  <p>element</p>
</div>

ဥပမာ . afterEnd နည်းလမ်း

ယခု အကိုးခံ element ၏ နောက်တွင် paragraph အသစ်တစ်ခုထည့်သွင်းကြပါစို့။

html<div id="target">
  <p>element</p>
</div>

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

let target = document.querySelector('#target');
target.insertAdjacentElement('afterEnd', p);

ကုဒ် run ပြီးနောက် ရလဒ်။

html<div id="target">
  <p>element</p>
</div>
<p>!</p>

ဥပမာ . afterBegin နည်းလမ်း

အကိုးခံ element ၏ စတင်နေရာတွင် paragraph အသစ်တစ်ခုထည့်သွင်းကြပါစို့။

html<div id="target">
  <p>element</p>
</div>

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

let target = document.querySelector('#target');
target.insertAdjacentElement('afterBegin', p);

ကုဒ် run ပြီးနောက် ရလဒ်။

html<div id="target">
  <p>!</p>
  <p>element</p>
</div>

ဥပမာ . beforeEnd နည်းလမ်း

အကိုးခံ element ၏ နောက်ဆုံးနေရာတွင် paragraph အသစ်တစ်ခုထည့်သွင်းကြပါစို့။

html<div id="target">
  <p>element</p>
</div>

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

let target = document.querySelector('#target');
target.insertAdjacentElement('beforeEnd', p);

ကုဒ် run ပြီးနောက် ရလဒ်။

html<div id="target">
  <p>element</p>
  <p>!</p>
</div>

ဆက်လက်လေ့လာရန်