Cara Menggunakan Method appendChild() JavaScript

Pada kesempatan kali ini saya akan menjelaskan cara menggunakan method appendChild() JavaScript. Perlu teman-teman ketahui sebelumnya, appendChild() adalah salah satu method JavaScript yang berfungsi untuk membuat element diakhir dari element yang ditentukan didalam nilai dari method tersebut. Seperti contoh saya memiliki struktur html list seperti berikut :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Cara Menggunakan Method appendChild() JavaScript</title>
</head>
<body>
	<button>Create List</button>
	<ul id="produk">
	  <li>Baju Muslim Pria</li>
	  <li>Baju Muslim Wanita</li>
	</ul>
</body>
</html>

Dari struktur kode html list tersebut kita akan menambahkan list baru dengan konten ” Baju Muslim Anak-Anak “. Maka dari itu kalian bisa menggunakan method appendChild() tersebut, sehingga kode html dan javascript diatas menjadi seperti berikut :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Cara Menggunakan Method appendChild() JavaScript</title>
</head>
<body>
	<button onclick="fungsisaya()">Create List</button>
	<ul id="produk">
	  <li>Baju Muslim Pria</li>
	  <li>Baju Muslim Wanita</li>
	</ul>
</body>
<script>
	function fungsisaya() {
		var node 	= document.createElement("li");
  		var textnode 	= document.createTextNode("Baju Muslim Anak-Anak");
  		    node.appendChild(textnode);
  		document.getElementById("produk").appendChild(node);
	}
</script>
</html>

Jika sudah kalian bisa menguji coba file html tersebut di browser dan untuk menambahkan list baru diakhir element kalian bisa klik tombol Create List.

Sampai disini penjelasan saya mengenai cara menggunakan method appendChild() JavaScript, semoga bermanfaat.