Metode appendChild

Metode appendChild memungkinkan untuk memasukkan elemen lain ke akhir suatu elemen. Paling sering digunakan setelah membuat elemen dengan createElement.

Sintaks

induk.appendChild(elemen);

Contoh

Mari buat paragraf, atur teksnya dan letakkan di halaman di akhir 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);

Hasil eksekusi kode:

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

Contoh

Diberikan ul. Mari tempatkan di dalamnya 9 tag li, sementara teksnya kita buat sebagai nomor urut:

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

Hasil eksekusi kode:

<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 tabel tr dan td:

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

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

for (let i = 1; i <= 3; i++) {
	let tr = document.createElement('tr'); // membuat tr
	
	// Mengisi tr dengan td:
	for (let j = 1; j <= 3; j++) {
		let td = document.createElement('td'); // membuat td
		td.textContent = j; // menulis teks di dalamnya
		
		tr.appendChild(td); // menambahkan td yang dibuat ke akhir tr
	}
	
	table.appendChild(tr); // menambahkan tr yang dibuat ke akhir tabel
}

Hasil eksekusi kode:

<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

metode append,
yang memasukkan elemen ke akhir
metode insertBefore,
yang memasukkan elemen sebelum elemen
metode insertAdjacentElement,
yang memasukkan elemen ke tempat yang ditentukan
metode insertAdjacentHTML,
yang memasukkan tag ke tempat yang ditentukan