insertAdjacentHTML နည်းလမ်း

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

Syntax

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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