createElement method

createElement method သည် tag အမည်ကို parameter အဖြစ်ပေးခြင်းဖြင့် အစိတ်အပိုင်းအသစ်ဖန်တီးရန် ခွင့်ပြုပါသည်။ ဖန်တီးပြီးနောက် အစိတ်အပိုင်းကို ပုံမှန်အစိတ်အပိုင်းတစ်ခုကဲ့သို့ လုပ်ဆောင်နိုင်ပြီး prepend, append, appendChild, insertBefore သို့မဟုတ် insertAdjacentElement စသည့် method များဖြင့် စာမျက်နှာပေါ်သို့ ထည့်သွင်းနိုင်ပါသည်။

createElement ၏ ရလဒ်ကို variable တစ်ခုတွင် ရေးထားပါက ၎င်း variable ထဲတွင် querySelector သို့မဟုတ် getElementById မှတစ်ဆင့် ရရှိခဲ့သည့်အစိတ်အပိုင်းကဲ့သို့သော အစိတ်အပိုင်းတစ်ခု ရှိမည်ဖြစ်သည်။ တစ်ခုတည်းသော ကွာခြားချက်မှာ ကျွန်ုပ်တို့၏ အစိတ်အပိုင်းသည် စာမျက်နှာပေါ်တွင် ထည့်သွင်းမထားခြင်း ဖြစ်သည်။ သို့သော် ၎င်း၏ innerHTML၊ attributes များကို ပြောင်းလဲနိုင်ပြီး event handlers များ တပ်ဆင်ကာ နောက်ဆုံးတွင် စာမျက်နှာပေါ်သို့ ထည့်သွင်းနိုင်ပါသည်။

Syntax

document.createElement('tag name');

ဥပမာ

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

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

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

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

parent.appendChild(p);

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

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

ဥပမာ

ul တစ်ခု ရှိသည်။ ၎င်းအတွင်း9 ခုသော li tags များကို ထည့်သွင်းပြီး ၎င်းတို့၏ text ကို အစဉ်လိုက် နံပါတ်များအဖြစ် လုပ်ကြည့်ရအောင်။

<ul id="parent"></ul>

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

for (let i = 1; i <= 9; i++) {
	let li = document.createElement('li');
	li.textContent = i;
	parent.appendChild(li);
}

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

<ul id="parent">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
</ul>

ဥပမာ

အစိတ်အပိုင်းများ ထည့်သွင်းသည့်အခါ ၎င်းတို့သို့ event handlers များ တွဲဆက်ကြည့်ရအောင်။

<ul id="parent"></ul>

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

for (let i = 1; i <= 9; i++) {
	let li = document.createElement('li');
	li.textContent = i;
	
	li.addEventListener('click', function() {
		alert(this.textContent);
	});
	
	parent.appendChild(li);
};

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

cloneNode method,
အစိတ်အပိုင်းကို ပွားယူရန် အသုံးပြုနိုင်သည်
createTextNode method,
text node အသစ်ဖန်တီးရန် အသုံးပြုနိုင်သည်