Kaedah appendChild

Kaedah appendChild membolehkan anda memasukkan elemen lain ke hujung elemen tertentu. Selalunya digunakan selepas mencipta elemen dengan createElement.

Sintaks

ibuBapa.appendChild(elemen);

Contoh

Mari kita buat perenggan, tetapkan teks untuknya 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.appendChild(p);

Keputusan pelaksanaan kod:

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

Contoh

Diberikan 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.appendChild(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 tr dan td:

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

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

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.appendChild(td); // menambah td yang dicipta ke hujung tr
	}
	
	table.appendChild(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 append,
yang memasukkan elemen ke hujung
kaedah insertBefore,
yang memasukkan elemen sebelum elemen
kaedah insertAdjacentElement,
yang memasukkan elemen ke lokasi yang ditentukan
kaedah insertAdjacentHTML,
yang memasukkan tag ke lokasi yang ditentukan