Kaedah append

Kaedah append membolehkan anda memasukkan elemen lain ke hujung mana-mana elemen. Parameter kaedah menerima elemen, biasanya dicipta melalui createElement, atau rentetan. Anda boleh menambah beberapa elemen atau rentetan sekaligus, dengan menyenaraikannya dipisahkan oleh koma.

Sintaks

ibuBapa.append(elemen atau rentetan);

Contoh

Mari kita buat perenggan, tetapkan teksnya dan letakkan pada halaman di hujung blok #parent:

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

Keputusan pelaksanaan kod:

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

Contoh

Mari letakkan beberapa perenggan sekaligus di hujung blok #parent:

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

Keputusan pelaksanaan kod:

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

Contoh

Mari kita gunakan rentetan sebagai parameter kaedah:

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

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

Keputusan pelaksanaan kod:

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

Contoh

Diberi ul. Mari letakkan 9 tag li di dalamnya, sambil menjadikan nombor urutan sebagai teks mereka:

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

Keputusan pelaksanaan kod:

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

Contoh

Mari isi jadual dengan tr dan td:

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

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

for (let i = 1; i <= 3; i++) {
	let tr = document.createElement('tr'); // mencipta tr
	
	// Mengisi tr dengan td:
	for (let j = 1; j <= 3; j++) {
		let td = document.createElement('td'); // mencipta td
		td.textContent = j; // tulis teks di dalamnya
		
		tr.append(td); // menambah td yang dicipta ke hujung tr
	}
	
	table.append(tr); // menambah tr yang dicipta ke hujung jadual
}

Keputusan pelaksanaan kod:

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

Lihat juga

kaedah prepend,
yang memasukkan elemen pada permulaan
kaedah appendChild,
yang memasukkan elemen pada hujung
kaedah insertBefore,
yang memasukkan elemen sebelum elemen
kaedah insertAdjacentElement,
yang memasukkan elemen di lokasi yang ditentukan
kaedah insertAdjacentHTML,
yang memasukkan tag di lokasi yang ditentukan