Menambah Element HTML Dinamis Dengan Jquery

Javascript – Jquery memiliki beberapa method untuk menambah element html secara dinamis yaitu append() , prepend() , after() dan before() . Pada kesempatan kali ini, kita akan mempelajari bagaimana cara untuk menggunakan append() untuk menambah element html baru di bagian akhir.

Sebelum mempelajari menggunakan append() , saya akan memberikan penjelasan sedikit untuk 4 method jquery tersebut.

after()menambah element html sesudah element yang dipilih
before() menambah element html sebelum element yang dipilih
prepend() menambah element html pada sisi dalam element yang dipilih di awal element tersebut
append() menambah element html pada sisi dalam element yang dipilih di akhir element tersebut

Mempersiapkan tampilan

Kita akan memulai bagaimana cara menambah element html dengan jquery menggunakan method append(). Pertama kita siapkan element html berupa form input sebagai berikut.

Silahkan jalankan di browser kalian, dan tampilannya akan seperti di bawah. Jangan lupa menambahkan link buat ke bootstrap dan jquery. Berikut saya kasih contoh jquery dan bootsrap referensinya.

Form Input

Penjelasan dari kode form input di atas sebagai berikut.

akan memanggil fungsi di javascript untuk menambah element html baru menggunakan jquery append().

ini digunakan sebagai inisialisasi counter untuk elemen dinamis yang akan dibuat.

digunakan sebagai tempat untuk element html baru ketika di klik tambah.

Setelah selesai membuat tampilannya, selanjutnya kita akan buat fungsi di javascriptnya.

Menggunakan Jquery Append() di Javascript

Kita akan membuat fungsi di javascript sebagai berikut.

Kode di atas akan dieksekusi ketika kita klik tombol tambah, method append() akan menambahkan element html baru ke dalam element id=”row_dinamis” dan counter id=” numbRows ” akan bertambah angkanya. Silahkan jalankan di browser kalian dan hasilnya seperti gambar di bawah.

Tampilan Input Html Dinamis

Setelah selesai membuat fungsi di javascript untuk menambah element html baru menggunakan jquery append(). Selanjutnya kita buat fungsi untuk menghapus row dinamisnya.

Kode di atas akan dieksekusi jika kita klik button hapus, dan element html nya akan dihapus sesuai id yang dimiliki.

Semoga apa yang saya tulis bermanfaat :D.

About the Author: ikhsan

You May Also Like

Leave a Reply

Your email address will not be published. Required fields are marked *