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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<main class="login-form"> <div class="cotainer"> <div class="row justify-content-center"> <div class="col-md-8"> <div class="card"> <div class="card-header">Elemen Dinamis</div> <div class="card-body"> <form action="" method=""> <div class="form-group row"> <label for="email_address" class="col-md-4 col-form-label text-md-right">E-Mail Address</label> <div class="col-md-6"> <input type="text" id="email_address0" name="email[]" class="form-control" name="email-address"> </div> <div class="col-md-1"> <button type="button" onclick="addrow()" class="btn btn-primary">Tambah</button> </div> </div> <input type="hidden" id="numbRows" value="0"> <div id="row_dinamis"></div> </div> </form> </div> </div> </div> </div> </div> </main> |
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.
|
1 2 3 4 5 6 |
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> |
Penjelasan dari kode form input di atas sebagai berikut.
|
1 |
<button type="button" onclick="addrow()" class="btn btn-primary">Tambah</button> |
akan memanggil fungsi di javascript untuk menambah element html baru menggunakan jquery append().
|
1 |
<input type="hidden" id="numbRows" value="0"> |
ini digunakan sebagai inisialisasi counter untuk elemen dinamis yang akan dibuat.
|
1 |
<div id="row_dinamis"></div> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
function addrow() { var no = parseInt($('#numbRows').val()); var html=''; $('#numbRows').val(no+1); html +='<div class="form-group row" id="rowContent'+ $('#numbRows').val()+'">'; html +=' <label for="email_address" class="col-md-4 col-form-label text-md-right">E-Mail Address '+$('#numbRows').val()+'</label>'; html +='<div class="col-md-6">'; html +='<input type="text" id="email_address0" name="email[]" class="form-control" name="email-address">'; html +='</div>'; html +='<div class="col-md-1"> <button type="button" onclick="removeRow('+$('#numbRows').val()+')" class="btn btn-danger">Hapus</button></div>'; html +='</div>'; $('#row_dinamis').append(html); } |
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.
Setelah selesai membuat fungsi di javascript untuk menambah element html baru menggunakan jquery append(). Selanjutnya kita buat fungsi untuk menghapus row dinamisnya.
|
1 2 3 4 5 6 7 8 |
function removeRow(no) { var cek = parseInt($('#numbRows').val()); if (cek != 0) { $('#numbRows').val(cek - 1); } $('#rowContent' + no).remove(); } |
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.
