DOM memungkinkan untuk menciptakan simpul baru ataupun menghapus suatu simpul.Bagi yang belum mengetahui elemen DOM apa saja yg digunakan untuk memanipulasi sebuah dokumen bisa dibaca di sini .Contoh penciptaan dan penghapusan simpul dapat dilihat di bawah ini.<html>
<head>
<title>Menambah dan menghapus simpul</title>
<script type="text/javascript">
var masukan = 0;
function tambahTeman(){
var table = document.getElementById('id_daftar');
var tr = document.createElement('tr');
var td1 = document.createElement('td');
var td2 = document.createElement('td');
var td3 = document.createElement('td');
var inp1 = document.createElement('input');
var inp2 = document.createElement('input');
if(masukan>0){
var gambar = document.createElement('img');
gambar.setAttribute('src','icon-cancel.png');
gambar.onclick = function (){
hapusTeman(tr);
}
td1.appendChild(gambar);
}
inp1.setAttribute("name", "nama", +masukan);
inp2.setAttribute("name", "alamat" +masukan);
table.appendChild(tr);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
td2.appendChild(inp1);
td3.appendChild(inp2);
masukan++;
}
function hapusTeman(tr){
tr.parentNode.removeChild(tr);
}
</script>
</head>
<body>
<table style="font-family:Verdana, Geneva, sans-serif; font-size:12px;">
<tbody id="id_daftar">
<tr><td colspan="3"><a href="javascript:tambahTeman();">
<img src="icon-add.png" width="20"/>Tambah seorang teman</a>
</td>
</tr>
<tr><td></td>
<td>Nama : </td>
<td>Alamat : </td>
</tr>
</tbody>
</table>
</body>
</html>Bila code di atas dipanggil, kemudian link Tambah seorang teman di klik maka akan diperoleh gambar di bawah ini. Kita bisa memasukan banyak teman disana.Kode :
Tambah seorang teman
digunakan untuk membuat sebuah sel yang mencakup 3 kolom. Isinya berupa link dengan tulisan Tambah seorang teman dan merujuk fungsi JavaScript tambahTeman(). Jadi kalau link ini di klik oleh pemakai, maka fungsi tersebut akan dipanggil.Isi fungsi tambahTeman() seperti berikut :function tambahTeman(){
var table = document.getElementById('id_daftar');
var tr = document.createElement('tr');
var td1 = document.createElement('td');
var td2 = document.createElement('td');
var td3 = document.createElement('td');
var inp1 = document.createElement('input');
var inp2 = document.createElement('input');
if(masukan>0){
var gambar = document.createElement('IMG');
gambar.setAttribute('src','icon-cancel.png');
gambar.onclick = function (){
hapusTeman(tr);
}
td1.appendChild(gambar);
}
inp1.setAttribute("name", "nama", +masukan);
inp2.setAttribute("name", "alamat" +masukan);
table.appendChild(tr);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
td2.appendChild(inp1);
td3.appendChild(inp2);
masukan++;
}Kode :var table = document.getElementById('id_daftar');Digunakan untuk memperoleh elemen yang ber-ID "id_daftar" dan selanjutnya dirujuk oleh variabel table. Dalam hal ini elemen yang dituju adalah tbody. Melalui elemen inilah baris dalam tabel akan ditambahkan. Secara berturut-turut :var tr = document.createElement('tr');
var td1 = document.createElement('td');
var td2 = document.createElement('td');
var td3 = document.createElement('td');
var inp1 = document.createElement('input');
var inp2 = document.createElement('input');Digunakan untuk menciptakan 6 buah elemen.Pernyataan :if(masukan>0)digunakan untuk menambahkan gambar x pada kolom pertama kalau variabel masukan bernilai lebih dari nol. Variabel masukan bersifat global dan awalnya diisi dengan nol. Variabel ini menyatakan jumlah baris untuk memasukan data nama dan alamat. Penambahan gambar dilakukan melalui :var gambar = document.createElement('img');Perintah ini digunakan untuk menciptakan sebuah elemen gambar. Elemen ini dilengkapi dengan atribut src yang diisi dengan 'icon-cancel.png' melaluigambar.setAttribute('src','icon-cancel.png');Sebagai konsekuensi dari perintah ini, kita perlu meletakan gambar di folder tempat file ini disimpan.Kode :gambar.onclick = function (){
hapusTeman(tr);
}dimaksudkan untuk meletakan fungsi yang dipanggil ketika kejadian onclick pada gambar berlangsung. Jadi, kalau kita mengklik x maka fungsi hapusTeman() akan di panggil.Kode :inp1.setAttribute("name", "nama", +masukan);
inp2.setAttribute("name", "alamat" +masukan);digunakan untuk menambah name untuk kedua kotak teks yang dipakai untuk memasukan data. Adapun isi name diisi dengan nama atau alamat ditmabah dengan nilai pada variabel masukan. Sebagai contoh, untuk baris pertama, name untuk inp1 akan berupa nama() dan name untuk inp2 akan berupa alamat().Kode :table.appendChild(tr);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
td2.appendChild(inp1);
td3.appendChild(inp2);merupakan mekanisme untuk menyusun struktur pohon ke dalam tabel. Pertama-tama, table.appendChild(tr); membuat simpul baru yang berisi baris ke dalam tabel. Selanjutnya,tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);membuat tiga buah simpul kolom yang menjadi anak dari baris (tr).Adapun :td2.appendChild(inp1);
td3.appendChild(inp2);digunakan untuk menjadikan inp1 sebagai anak dari td2 dan inp2 sebagai anak dari td3.Baris:masukan++;digunakan untuk menaikan nilai variabel masukan sebesar 1.Adapun fungsi yang digunakan untuk menghapus baris dalam tabel adalah seperti berikut :Pada perintah di atas, baris tr dihapus dengan cara :function hapusTeman(tr){
tr.parentNode.removeChild(tr);
}1. Pertana-tama kita perlu mendapatkan induk dari baris tersebut, yang dilakukan menggunakan pemanggilan tr.parentNode2. Selanjutnya, melalui induknya, semua anak dihapus dengan memanggil removeChild().
Update Contact :
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email : Fajarudinsidik@gmail.com
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email: Fajarudinsidik@gmail.com
atau Kirimkan Private messanger melalui email dengan klik tombol order dibawah ini :
