Cara Menggunakan appendChild() Pada Javascript -

appendChild() dalam Javascript merupakan salah satu dari method yang dipakai untuk memanipulasi DOM. Jadi DOM sendiri kepanjangan dari Document Objek Model, dalam kasus ini saya akan membahas cara menggunakan appendChild() pada Javascript yang digunakan untuk menambahkan element baru. Kenapa bisa menambahkan element baru jadi disini konsepnya seperti parent dan child seperti itu kurang lebih. Supaya tidak bingung saya jelaskan sedikit dalam kata appendChild terdapat kata end yang berarti (akhir) atau menambahkan setelahnya. Jadi sebagai contoh (saya,kamu) berarti menambahkan saya setelah kamu begitu (duuuuh jadi baperrrr) atau sebagai contoh tambahan yaitu element a setelah element b.

Langkah yang harus dipersiapkan sekarang buat struktur HTML ,kemudian perhatikan code dibawah ini :

<!DOCTYPE html>
<html>
<head>
	<meta charset=utf-8>
	<meta name=description content="">
	<meta name=viewport content="width=device-width, initial-scale=1">
	<title>Penggunaan appendChild() di Javascript</title>
</head>
<body> 
	<h2>Daftar Buah-buahan :</h2>
	<ul id="buah">
		<li>Apel</li>
	</ul>

	<script type="text/javascript">
		// bagian parent Elemet
		const buah = document.getElementById("buah");
		const fruitList = ["Alpukat","Blackberry", "Blackcurrant", "Blueberry", "Cermai", "Duku", ];

		for(let fruit of fruitList){
			// Membuat List Item Baru <li>new list</li>
		let newBuah = document.createElement('li');
		newBuah.textContent = fruit;

		buah.appendChild(newBuah);
		}
	</script>
</body>
</html>

Jadi sekarang coba sahabat save code diatas, lalu jalankan pada browser. Jika sudah benar maka akan seperti berikut tampilannya

Demikian pembahasan artikel kali ini tentang cara menggunakan appendChild() pada Javascript, semoga bermanfaat dan selamat mencoba.

terima kasih

Cara Menggunakan appendChild() Pada Javascript

Kategori