append method

append method သည် တစ်ခုခုသော element ၏ အဆုံးထဲသို့ အခြား element ကို ထည့်သွင်းခွင့်ပြုသည်။ ၎င်း method ၏ parameter သည် element တစ်ခုကို လက်ခံသည်၊ ယေဘုယျအားဖြင့် createElement မှတစ်ဆင့် ဖန်တီးထားသော element၊ သို့မဟုတ် string တစ်ခု ဖြစ်သည်။ element များ သို့မဟုတ် string များကို comma ခြားပြီး စာရင်းပြုစုကာ ချက်ချင်းပင် ပေါင်းထည့်နိုင်သည်။

Syntax

မိဘelement.append(element သို့မဟုတ် string);

ဥပမာ

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

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

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

ဥပမာ

#parent block ၏ အဆုံးထဲသို့ စာပိုဒ်များစွာကို ချက်ချင်းပင် ထားကြပါစို့။

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

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

let p1 = document.createElement('p');
p1.textContent = 'a';

let p2 = document.createElement('p');
p2.textContent = 'b';

parent.append(p1, p2);

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

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

ဥပမာ

method ၏ parameter အဖြစ် string တစ်ခုကို အသုံးပြုကြပါစို့။

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

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

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

<div id="parent">
	<p>1</p>
	<p>2</p>
	<p>3</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.append(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>

ဥပမာ

ဇယား 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.append(td); // ဖန်တီးထားသော td ကို tr ၏ အဆုံးထဲသို့ ပေါင်းထည့်သည်
	}
	
	table.append(tr); // ဖန်တီးထားသော tr ကို ဇယား၏ အဆုံးထဲသို့ ပေါင်းထည့်သည်
}

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

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

ထပ်မံကြည့်ရှုရန်

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