Tutorial Belajar jQuery Part 9: Cara Menambah Elemen HTML dengan jQuery

Dalam tutorial belajar jQuery Duniailkom kali ini saya akan membahas cara menambah elemen HTML baru dengan jQuery. Untuk ini kita akan mempelajari 4 method jQuery: append(), prepend(), after() dan before().

---

Cara Penggunaan Method append() dan prepend() jQuery

Method append() dan prepend() bisa digunakan untuk menambah elemen HTML baru ke dalam kode HTML yang sudah ada. Method append() akan menambahkan elemen baru ke bagian akhir, sedangkan prepend() akan menambahkan elemen HTML baru ke bagian awal.

Yang perlu dicatat, kedua fungsi ini menambahkan element baru ke dalam selector yang dicari. Berikut contohnya:

   
Sedang belajar jQuery di Duniailkom...

Pada kode program diatas, saya memiliki sebuah tag

dengan id=”box”. Di dalamnya terdapat sebuah tag

.

Ketika tombol “Append” di klik, akan dijalan perintah berikut:

$("#box").append("
jQuery is Amazing...
");

Ini maksudnya, tambahkan kode “

jQuery is Amazing…

” ke bagian akhir tag

. Hasilnya adalah sebagai berikut:

 
Sedang belajar jQuery di Duniailkom...
 
jQuery is Amazing...

Dapat dilihat bahwa, element

akan ditambahkan ke bagian akhir di dalam tag

. Hasil ini akan mudah dilihat jika anda mengaktifkan Web Developer Tools dari web browser, seperti gambar berikut:

Begitu juga ketika tombol “Prepend” di klik, perintah:

$("#box").prepend("
Learning jQuery...
");

Akan menambah sebuah paragraf baru ke dalam tag

, pada posisi paling awal. Berikut hasil yang di dapat:

  
Learning jQuery...
  
Sedang belajar jQuery di Duniailkom...

Silahkan anda coba sendiri:

See the Pen Cara Menambah Elemen HTML dengan jQuery, append() dan prepend() by duniailkom (@duniailkom) on CodePen.10206

---

Cara Penggunaan Method after() dan before() jQuery

Method after() dan before() jQuery sebenarnya sangat mirip dengan append() dan prepend(). Bedanya terletak di posisi di mana element baru akan ditambahkan. Method after() dan before() akan menambahkan elemen baru di luar jQuery Selector.

Agar lebih jelas, mari jalankan kode yang sama dengan sebelumnya, dan hanya merubah method append() menjadi after() dan prepend() menjadi before():

   
Sedang belajar jQuery di Duniailkom...

See the Pen Cara Menambah Elemen HTML dengan jQuery, after() dan before() by duniailkom (@duniailkom) on CodePen.10206

Jika anda menjalankan kode diatas, hasilnya tampak sama persis seperti kode program kita sebelumnya. Tapi method after() dan before() ini akan menambahkan elemen baru di sisi luar.

Ketika tombol “After” di klik, perintah berikut akan dijalankan:

$("#box").after("
jQuery is Amazing...
");

Hasilnya adalah sebagai berikut:

  
Sedang belajar jQuery di Duniailkom...

jQuery is Amazing...

Perhatikan beda antara method append() dengan after(). Perintah after() akan menampatkan tag

disisi luar, yakni setelah tag

, bukan di dalam tag

sebagaimana method append().

Begitu juga dengan method before(), hasilnya adalah sebagai berikut:

Learning jQuery...

  
Sedang belajar jQuery di Duniailkom...

Method before() akan menampatkan tag

sebelum dan diluar

.

Dalam tutorial belajar jQuery kali ini kita telah membahas cara menambahkan element baru ke halaman HTML. Apabila konsep ini digabung dengan teknik mengambil nilai dari form HTML (yang kita pelajari dalam beberapa tutorial sebelumnya), kita bisa membuat halaman HTML yang dinamis. Inilah yang akan saya bahas selanjutnya: Cara Menambah Isi Tabel HTML secara dinamis dengan jQuery.

Sumber wk.com

blogger

Next Post

Previous Post

Langganan: Posting Komentar (Atom)