insertAdjacentElement နည်းလမ်း
insertAdjacentElement နည်းလမ်းသည်
စာမျက်နှာ၏ မည်သည့်နေရာတွင်မဆို element တစ်ခုထည့်သွင်းရန် ခွင့်ပြုပေးသည်။
createElement ကို အသုံးပြု၍ element ဖန်တီးပြီးနောက်
အများဆုံးအသုံးပြုလေ့ရှိသည်။
ကုဒ်ကို အကိုးခံ element နှင့်နှိုင်းယှဉ်၍ ထည့်သွင်းသည်။
အကိုးခံ element ၏ ရှေ့တွင် (ထည့်သွင်းနည်းလမ်း beforeBegin)၊
၎င်း၏ နောက်တွင် (ထည့်သွင်းနည်းလမ်း afterEnd)၊
ထို့အပြင် အကိုးခံ element ၏ စတင်နေရာတွင် (ထည့်သွင်းနည်းလမ်း afterBegin)
သို့မဟုတ် နောက်ဆုံးနေရာတွင် (ထည့်သွင်းနည်းလမ်း beforeEnd)
ထည့်သွင်းနိုင်သည်။
Syntax
အကိုးခံ element.insertAdjacentElement(ထည့်သွင်းနည်းလမ်း, ထည့်သွင်းရန် ကုဒ်);
ဥပမာ . beforeBegin နည်းလမ်း
အကိုးခံ element သည် #target element ဖြစ်ပါစို့။
၎င်း၏ ရှေ့တွင် paragraph အသစ်တစ်ခုထည့်သွင်းကြပါစို့။
<div id="target">
<p>element</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeBegin', p);
ကုဒ် run ပြီးနောက် ရလဒ်။
<p>!</p>
<div id="target">
<p>element</p>
</div>
ဥပမာ . afterEnd နည်းလမ်း
ယခု အကိုးခံ element ၏ နောက်တွင် paragraph အသစ်တစ်ခုထည့်သွင်းကြပါစို့။
<div id="target">
<p>element</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterEnd', p);
ကုဒ် run ပြီးနောက် ရလဒ်။
<div id="target">
<p>element</p>
</div>
<p>!</p>
ဥပမာ . afterBegin နည်းလမ်း
အကိုးခံ element ၏ စတင်နေရာတွင် paragraph အသစ်တစ်ခုထည့်သွင်းကြပါစို့။
<div id="target">
<p>element</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterBegin', p);
ကုဒ် run ပြီးနောက် ရလဒ်။
<div id="target">
<p>!</p>
<p>element</p>
</div>
ဥပမာ . beforeEnd နည်းလမ်း
အကိုးခံ element ၏ နောက်ဆုံးနေရာတွင် paragraph အသစ်တစ်ခုထည့်သွင်းကြပါစို့။
<div id="target">
<p>element</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeEnd', p);
ကုဒ် run ပြီးနောက် ရလဒ်။
<div id="target">
<p>element</p>
<p>!</p>
</div>
ဆက်လက်လေ့လာရန်
-
insertAdjacentHTMLနည်းလမ်း,
အရာသည် tag များကို သတ်မှတ်ထားသော နေရာတွင် ထည့်သွင်းပေးသည် -
insertAdjacentTextနည်းလမ်း,
အရာသည် စာသားကို သတ်မှတ်ထားသော နေရာတွင် ထည့်သွင်းပေးသည် -
prependနည်းလမ်း,
အရာသည် element များကို စတင်နေရာတွင် ထည့်သွင်းပေးသည် -
appendနည်းလမ်း,
အရာသည် element များကို နောက်ဆုံးနေရာတွင် ထည့်သွင်းပေးသည် -
appendChildနည်းလမ်း,
အရာသည် element များကို မိဘ element ၏ နောက်ဆုံးနေရာတွင် ထည့်သွင်းပေးသည် -
insertBeforeနည်းလမ်း,
အရာသည် element များကို element တစ်ခု၏ ရှေ့တွင် ထည့်သွင်းပေးသည်
