Menuju Bagian 1

Menambah/Membuat Elemen

Untuk menambah atau membuat sebuah elemen HTML baru dengan Javascript, hal yang perlu dilakukan adalah:

1. Membuat element node
2. Menambahkan element node ke elemen yang sudah ada

untuk membuat sebuah element node dapat dilakukan dengan 3 cara, yaitu:

• element.cloneNode() : meng-klon/menduplikat element yang sudah ada menjadi suatu element node
• document.createElement(element) : membuat element node baru
• document.createTextNode(text) : membuat sebuat text node

contoh penggunaan element.cloneNode():

<ul id="buah">
	<li>Apel</li>
	<li>Nanas</li>
</ul>
<div id="belanja">
	<i>Daftar belanja<i>
	<ul id="sayur">
	  <li>Bayam</li>
	  <li>Kangkung</li>
	</ul>
</div>

<script>
	var buah=document.getElementById("buah");
	var node=buah.cloneNode(true);
	document.getElementById("belanja").appendChild(node);
</script>

sebelum di clone:
setelah di clone :


contoh penggunaan document.createElement(element) dan document.createTextNode(text):

<ul id="hobi">
	<li>Ngoding</li>
	<li>Utak atik komputer</li>
</ul>

<script>
	var hobi=document.getElementById("hobi");
	var node=document.createElement("li");//membuat elemen baru "li"
	var teksnode=document.createTextNode("Mendengarkan Musik");//membuat sebuat teks node
	node.appendChild(teksnode);//Memasukkan teksnode keadalam elemen "li"
	hobi.appendChild(node);//memasukkan elemen "li" kedalam elemen dengan id "hobi"
</script>

elemen "li" yang kita buat akan menjadi child terakhir, output:

agar tidak menjadi child paling akhir, kita bisa menggunakan metode insertBefore()

<ul id="hobi">
	<li>Ngoding</li>
	<li>Utak atik komputer</li>
</ul>

<script>
	var hobi=document.getElementById("hobi");
	var node=document.createElement("li");
	var teksnode=document.createTextNode("Mendengarkan Musik");
	var child=document.getElementById("hobi").children;//memilih element node dari child elemen dg id "hobi"
	node.appendChild(teksnode);
	hobi.insertBefore(node,child[1]);//memasukkan elemen baru "li" sebelum child dengan indeks 1
</script>

sekarang elemen baru "li" menjadi urutan ke dua:

Menghapus Elemen

Menuju ke bagian tiga