JavaScript တွင် အစိတ်အပိုင်းများ ဖန်တီးခြင်းနှင့် ထည့်သွင်းခြင်း

ယခု ကျွန်ုပ်တို့သည် JavaScript မှတစ်ဆင့် DOM အစိတ်အပိုင်းအသစ်များ ဖန်တီးနည်းကို သင်ယူပြီး ၎င်းတို့ကို စာမျက်နှာပေါ်သို့ ထည့်သွင်းနည်းကို သင်ယူပါမည်။ ဤအတွက် ရည်ရွယ်ထားသော နည်းလမ်းမှာ createElement ဖြစ်ပါသည်။ ဤနည်းလမ်း၏ ပါရာမီတာအဖြစ် ဖန်တီးရန်လိုအပ်သော တဂ်အမည်ကို ပေးပို့ရပါမည်။

createElement ၏ ရလဒ်ကို ကိန်းရှင်တစ်ခုထဲသို့ သွင်းယူပါက၊ ထိုကိန်းရှင်ထဲတွင် querySelector မှတစ်ဆင့် ရယူထားသည့် အစိတ်အပိုင်းကဲ့သို့ ဖြစ်နေပါမည်။

တစ်ခုတည်းသော ခြားနားချက်မှာ - ကျွန်ုပ်တို့၏ အစိတ်အပိုင်းသည် စာမျက်နှာပေါ်တွင် နေရာချထားခြင်း မရှိပါ။ သို့သော် ကျွန်ုပ်တို့သည် ၎င်း၏စာသားကို၊ လက္ခဏာရပ်များကို ပြောင်းလဲနိုင်ပြီး၊ ဖြစ်ရပ်များအတွက် လက်ခံသည့်ကိရိယာများ တပ်ဆင်ကာ နောက်ဆုံးတွင် ၎င်းကို စာမျက်နှာပေါ်တွင် နေရာချထားနိုင်ပါသည်။

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

လက်တွေ့ဥပမာတစ်ခုကို ကြည့်ရအောင်။ ကျွန်ုပ်တို့တွင် div တစ်ခုရှိပြီး၊ ၎င်းထဲတွင် အက်ဒ်ဆာများစွာ ရှိသည်ဆိုပါစို့။

<div id="parent">
	<p>1</p>
	<p>2</p>
	<p>3</p>
</div>

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

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

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

parent.appendChild(p);

ကုဒ်အား လုပ်ဆောင်ခြင်း၏ ရလဒ်။

<div id="parent">
	<p>1</p>
	<p>2</p>
	<p>3</p>
	<p>!</p>
</div>

ol ကို ပေးထားသည်။

<ol id="elem"></ol>

၎င်း၏နောက်ဆုံးတွင် li ကို စာသား 'item' ဖြင့် ထည့်သွင်းပါ။

ol နှင့် ခလုတ်တစ်ခုကို ပေးထားသည်။

<ol id="elem"></ol>
<button id="button">click me</button>

ခလုတ်ကို နှိပ်လိုက်သောအခါ စာရင်း၏နောက်ဆုံးတွင် li ကို စာသား 'item' ဖြင့် ထည့်သွင်းရန် ပြုလုပ်ပါ။