appendChild method

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

Syntax

parent.appendChild(element);

ဥပမာ

စာပိုဒ်တစ်ခု ဖန်တီးပြီး၊ ၎င်းအတွက် စာသားသတ်မှတ်ကာ စာမျက်နှာပေါ်ရှိ #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);

ကုဒ်အလုပ်လုပ်ဆောင်မှု၏ ရလဒ်။

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

ဥပမာ

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

<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);
}

ကုဒ်အလုပ်လုပ်ဆောင်မှု၏ ရလဒ်။

<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>

ဥပမာ

<ကိုယ်စားပြုတဲ့ဇယား>ကို tr များနှင့် td များဖြင့် ဖြည့်ကြပါစို့။

<table id="table"></table>

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

for (let i = 1; i <= 3; i++) {
	let tr = document.createElement('tr'); // tr ဖန်တီးသည်
	
	// tr ကို td များဖြင့် ဖြည့်သည်။
	for (let j = 1; j <= 3; j++) {
		let td = document.createElement('td'); // td ဖန်တီးသည်
		td.textContent = j; // ၎င်းတွင် စာသားရေးသည်
		
		tr.appendChild(td); // ဖန်တီးထားသော td ကို tr ၏ အဆုံးတွင် ထည့်သည်
	}
	
	table.appendChild(tr); // ဖန်တီးထားသော tr ကို ဇယား၏ အဆုံးတွင် ထည့်သည်
}

ကုဒ်အလုပ်လုပ်ဆောင်မှု၏ ရလဒ်။

<table id="table">
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
</table>

ဆက်လက် ကြည့်ရှုပါ

append method,
သည် element များကို အဆုံးတွင် ထည့်သွင်းသည်
insertBefore method,
သည် element တစ်ခုကို အခြား element တစ်ခု၏ ရှေ့တွင် ထည့်သွင်းသည်
insertAdjacentElement method,
သည် element တစ်ခုကို သတ်မှတ်ထားသော နေရာတွင် ထည့်သွင်းသည်
insertAdjacentHTML method,
သည် tag များကို သတ်မှတ်ထားသော နေရာတွင် ထည့်သွင်းသည်