JQuery memiliki fungsi untuk menambahkan element baru pada element HTML, bisa itu menambahkan element sebelum element, sesudah element, sebelum element yang ada di dalam nya atau sesudah element yang ada di dalamnya. adapun beberapa fungsi jquery yang bisa di gunakan untuk menambah element dengan jquery adalah:
after()
merupakan fungsi jquery untuk menambahkan element html pada sesudah element yang di pilih.
before()
merupakan fungsi jquery untuk menambahkan element html pada sebelum element yang di pilih.
prepend()
merupakan fungsi jquery untuk menambahkan element html pada sisi dalam element yang di pilih tapi di awal isi element tersebut.
append()
merupakan fungsi jquery untuk menambahkan element html pada sisi dalam element yang di pilih tapi di akhir isi dari element tersebut.
Pasti anda bingung dengan penjelasan pengertian dari fungsi-fungsi jquery di atas yang di gunakan untuk menambahkan element. alangkah lebih baiknya akan di jelaskan satu persatu dengan di sisipkan masing-masing contoh agar lebih mudah di pahami. untuk contoh dari penggunaan fungsi after, before, append dan prepend akan di gabungkan pada satu contoh agar lebih mudah di pelajari dan di rasakan apa-apasaja perbedaan dari masing-masing fungsi jquery tersebut.
index.html
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
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
<head>
<title>Tutorial belajar JQuery Part9:MenambahElementdenganJQuery</title>
dapat di perhatikan pada contoh di atas. terdapat empat buah tombol yang sudah kita beri tanda masing-masing dengan nama after, before, append dan prepend. tujuan dari masing-masing tombol yang saya buat sebagai contoh ini adalah untuk menambahkan element yang dapat juga perhatikan pada syntax jquery berikut. Belajar JQuery Menambah Element Dengan Jquery
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$('.after').click(function(){
$('.kotak').after("<h4>contoh after</h4>")
});
$('.before').click(function(){
$('.kotak').before("<h4>contoh before</h4>")
});
$('.append').click(function(){
$('.kotak').append("<h4>contoh append</h4>")
});
$('.prepend').click(function(){
$('.kotak').prepend("<h4>contoh prepend</h4>")
});
jika tombol after di klik maka element “<h4>contoh after</h4>” akan di tambahkann pada sesudah element kotak seperti pada gambar yang hasil eksekusi di atas. dan jika yang di klik tombol before maka element “<h4>contoh before</h4>” akan muncul pada sebelum element kotak. jika tombol append di klik maka element “<h4>contoh append</h4>” akan di munculkan di dalam kotak tapi pada posisi awal dari semua isi pada element kotak. jika tombol prepend di klik maka element “<h4>contoh prepend</h4>” akan di munculkan atau di tambahkan di dalam element class kotak tetapi pada terletak pada akhir semua element yang terdapat di dalam element kotak.
Belajar JQuery Menambah Element Dengan JQuery
sesuai dengan masing-masing contoh lokasi seperti pada gambar di atas. dan untuk lebih jelasnya lagi dilahkan pelajari pada contoh berikut ini.
terima kasih sudah membaca tutorial Belajar JQuery Menambah Element Dengan Jquery selanjutnya pada tutorial belajar jquery selanjutnya akan di jelaskan tentang menambahkan css dengann JQuery pada Belajar JQuery Part 10.
Diki Alfarabi Hadi
Coding enthusiast.
Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.
Halo teman-teman, selamat datang di tutorial Membuat Pencarian Tanpa Reload Dengan PHP Dan Ajax JQuery. Pada tutorial sebelumnya di malasngoding.com, teman-teman sudah belajar membuat pencarian ...
Membuat Halaman Web Ajax Tanpa Reload dengan JQuery – Halo teman-teman. sebelumnya saya ucapkan dulu terima kasih sudah kembali berkunjung di www.malasngoding.com. Sesuai dengan judul ...
Show Hide Form Password Dengan JQuery Show Hide Form Password Dengan JQuery – Mungkin teman-teman ada yang masih bingung dengan judul tutorial kali ini, yaitu Show ...
Membuat Animasi Form Dengan JQuery Membuat Animasi Form Dengan JQuery – Halo teman-teman malasngoding.com. terima kasih sebelumnya saya ucapkan ke pada teman-teman pembaca setia di ...
Download Ebook belajar HTML & CSS dasar untuk pemula gratis.
Ebook ini bisa di download oleh teman-teman yang baru mulai belajar HTML dan CSS dasar tapi tidak tahu mau memulai belajar dari mana.
materi pembelajaran sudah di susun secara sistematis dan di dukung contoh gambar.