Hallo sobat program, bertemu kembali dengan saya Rizal dan masih tetap di website Dumetschool. Pada kesempatan kali ini kita akan coba manipulasi Document HTML lagi atau DOM menggunakan Javascript dan di pembahasan kali ini kita akan membahas tentang Cara Mengkloning Element Menggunakan Javascript.
Seperti biasa sebelum kita praktek kita harus lebih dahulu mengetahui definisi dari tiap tiap pembahasan. Misalnya untuk saat ini adalah mengkloning atau kloning merupakan sebuah salinan atau copyan dari objek yang kita kloning. Nah dijavascript sudah disediakan sebuah fungsi untuk mengkloning tsb.
Dan fungsi untuk mengkloning element HTML yaitu cloneNode() jadi fungsi atau method cloneNode ini digunakan untuk membuat salinan atau mengkloning semua attribute atau element beserta nilainya. Dan cloneNode ini dipadukan atau digabungkan dengan fungsi appendChild atau insertBefore untuk memasukan kloninang kedalam dokumen.
Untuk lebih jelasnya mari kita coba tentang  Cara Mengkloning Element Menggunakan Javascript. Oke langkah pertama silahkan jalankan/run software text-editornya lalu kemudian ketiklah kode HTML seperti pada contoh dibawah ini :
|
1 2 3 4 5 6 7 8 |
<h4 align="center">Contoh</h4> <div id="contoh2"></div> <center> <button onclick="myFunction()">Klik Saya!</button> </center> <h4 align="center">Hasil Kloning</h4> |
Jika sudah, lalu teman-teman tambahkan sedikit CSS seperti pada contoh dibawah ini :
|
1 2 3 |
<style type="text/css"> #contoh2 {width: 100px; height: 100px; background: lightgreen; margin: 10px auto;} </style> |
Hasilnya bisa langsung teman-teman jalankan saja dibrowser yang teman-teman gunakan, jika sudah berbentuk kotak berwarna hijau stabilo berarti sudah benar. Dan langkah terakhir kita akan menyalin atau mengkloning kotak tersebut menggunakan javascript, teman-teman bisa ketik kodenya seperti pada contoh dibawah ini :
|
1 2 3 4 5 6 7 |
<script> function myFunction() { var itm = document.getElementById("contoh2"); var cln = itm.cloneNode(true); document.body.appendChild(cln); } </script> |
Jika sudah simpan dan silahkan dijalankan, maka hasilnya akan menjadi seperti pada gambar dibawah ini :
Dari hasil gambar diatas, ada sebuah tombol dimana saya membuat fungsi onclick atau jika di klik maka kotak yang diatas akan otomatis di kloning. Jadi seperti itulah contoh sederhananya dari materi pembahasan kita kali ini tentang Cara Mengkloning Element Menggunakan Javascript.
Oke saya rasa cukup sekian dan semoga bermanfaat buat teman-teman dan sampai bertemu dipembahasan selanjutnya.
Terimakasih