Metode append

Metode append memungkinkan untuk menyisipkan elemen lain ke akhir suatu elemen. Parameter metode menerima elemen, yang biasanya dibuat melalui createElement, atau string. Beberapa elemen atau string dapat ditambahkan sekaligus, dengan mendaftarkannya dipisahkan koma.

Sintaks

induk.append(elemen atau string);

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.append(p);

Hasil eksekusi kode:

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

Contoh

Mari letakkan beberapa paragraf sekaligus di akhir 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);

Hasil eksekusi kode:

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

Contoh

Mari gunakan string sebagai parameter metode:

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

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

Hasil eksekusi kode:

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

Contoh

Diberikan ul. Mari tempatkan 9 tag li di dalamnya, sementara teksnya dijadikan 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.append(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 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'); // 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 ke dalamnya
		
		tr.append(td); // menambahkan td yang dibuat ke akhir tr
	}
	
	table.append(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 prepend,
yang menyisipkan elemen di awal
metode appendChild,
yang menyisipkan elemen di akhir
metode insertBefore,
yang menyisipkan elemen sebelum elemen tertentu
metode insertAdjacentElement,
yang menyisipkan elemen di tempat yang ditentukan
metode insertAdjacentHTML,
yang menyisipkan tag di tempat yang ditentukan