insertAdjacentHTML နည်းလမ်း

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

Syntax

အခြေပြု element.insertAdjacentHTML(ထည့်သွင်းနည်း, ထည့်သွင်းရန် ကုဒ်);

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

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

<div id="target">
	<p>elem</p>
</div>

let target = document.querySelector('#target');
target.insertAdjacentHTML('beforeBegin', '<p>!</p>');

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

<p>!</p>
<div id="target">
	<p>elem</p>
</div>

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

ယခု အခြေပြု element ၏ နောက်တွင် စာပိုဒ်အသစ်တစ်ခု ထည့်ကြည့်မည်။

<div id="target">
	<p>elem</p>
</div>

let target = document.querySelector('#target');
target.insertAdjacentHTML('afterEnd', '<p>!</p>');

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

<div id="target">
	<p>elem</p>
</div>
<p>!</p>

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

အခြေပြု element ၏ အစတွင် စာပိုဒ်အသစ်တစ်ခု ထည့်ကြည့်မည်။

<div id="target">
	<p>elem</p>
</div>

let target = document.querySelector('#target');
target.insertAdjacentHTML('afterBegin', '<p>!</p>');

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

<div id="target">
	<p>!</p>
	<p>elem</p>
</div>

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

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

<div id="target">
	<p>elem</p>
</div>

let target = document.querySelector('#target');
target.insertAdjacentHTML('beforeEnd', '<p>!</p>');

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

<div id="target">
	<p>elem</p>
	<p>!</p>
</div>

ဆက်လက်ကြည့်ရှုရန်

insertAdjacentText နည်းလမ်း,
သတ်မှတ်ထားသောနေရာသို့ စာသားထည့်သွင်းသည်
insertAdjacentElement နည်းလမ်း,
သတ်မှတ်ထားသောနေရာသို့ element ထည့်သွင်းသည်
prepend နည်းလမ်း,
element များကို အစတွင် ထည့်သွင်းသည်
append နည်းလမ်း,
element များကို အဆုံးတွင် ထည့်သွင်းသည်
appendChild နည်းလမ်း,
element များကို မိဘ element ၏ အဆုံးတွင် ထည့်သွင်းသည်
insertBefore နည်းလမ်း,
element များကို element တစ်ခု၏ ရှေ့တွင် ထည့်သွင်းသည်