Menambah dan Menghapus Elemen HTML ~ Pemrograman dan Teknologi

Menambahkan dan mengurangi apa yang terlihat di halaman HTML akan cukup berguna saat kita menginginkan tampilan Halaman yang dinamis. Tidak banyak function yang perlu kita hafalkan untuk melakukan penambahan dan penghapusan elemen HTML. Yang pertama dan cukup penting, kalian harus sudah paham cara menggunakan getElementById dan kawan-kawan. Ini karena method appendChild dan removeChild memerlukan elemen yang berperan sebagai "parent" sebelum method-method tersebut bisa digunakan.

Selanjutnya, ingat method-method berikut ini.

RemoveChild => Menghapus elemen yang sudah ada.
AppendChild => Menambahkan elemen yang sudah dibuat ke elemen yang sudah ada
document.createElement => Membuat elemen baru.

Penggunaan method-method di atas bisa kalian lihat di bawah ini.

<HTML>
<HEAD>
    <title>Belajar HTML</title>
</HEAD>
<BODY>
    <div id="hasil"></div>
    <script>
        //HTML
        var elemen=document.getElementById("hasil");
        var tombol=document.createElement("button");
        tombol.innerHTML="Klik untuk menghapus";
        elemen.appendChild(tombol);
        tombol.onclick=function(){
            elemen.removeChild(tombol);
        }
    </script>
</BODY> 
</HTML>

Kode HTML di atas tidak akan menampilkan apapun tanpa javascript karena tag yang ada awalnya cuma tag <div>. Tombol bisa dibuat dan ditambahkan ke dalam tag <div> karena adanya document.createElement dalam script. Elemen HTML yang sudah kalian buat dengan document.createElement bisa kalian ubah isinya dengan innerHTML. Kalian juga bisa mengubah isi atribut lain dengan getAttribute atau properti lain seperti value, className, dll. Kalau kalian mengklik tombolnya, seharusnya tombolnya akan menghilang karena ada method removeChild.