Kamu punya daftar komentar di halaman dan ingin setiap komentar baru langsung muncul tanpa reload. Atau tombol hapus yang benar-benar membuang baris dari tabel. Semua itu pekerjaan manipulasi DOM, dan jQuery menyediakan cara singkat untuk melakukannya. Panduan ini membahas metode inti untuk menambah, menghapus, dan mengubah elemen, lengkap dengan contoh yang bisa langsung kamu coba.
Mengapa manipulasi DOM lewat jQuery lebih ringkas
JavaScript mentah punya createElement, appendChild, insertBefore, dan removeChild. Untuk menambah satu elemen ke dalam daftar, kamu perlu membuat node, mengisi teks, lalu memasukkannya ke induk yang tepat. jQuery membungkus urutan itu menjadi satu pemanggilan metode pada koleksi elemen yang sudah dipilih.
Hampir semua metode manipulasi juga bekerja pada banyak elemen sekaligus. Kalau selektormu mengembalikan sepuluh baris, satu panggilan .addClass() akan mengubah kesepuluhnya. Sebelum mulai, pastikan kamu nyaman dengan cara memilih elemen dengan selector jQuery, karena semua metode di bawah ini bergantung pada seleksi yang tepat.
Menambah elemen: append, prepend, after, dan before
Empat metode ini sering tertukar. Perbedaannya ada pada posisi elemen baru terhadap elemen yang kamu pilih.
- append menaruh konten di dalam elemen target, di akhir.
- prepend menaruh konten di dalam elemen target, di awal.
- after menaruh konten sebagai saudara, tepat setelah elemen target.
- before menaruh konten sebagai saudara, tepat sebelum elemen target.
Perhatikan contoh berikut. Anggap ada daftar dengan id komentar.
// menambah item di akhir daftar
$('#komentar').append('<li>Komentar baru</li>');
// menambah item di awal daftar
$('#komentar').prepend('<li>Komentar paling atas</li>');
// menambah paragraf setelah daftar
$('#komentar').after('<p>Terima kasih sudah berkomentar.</p>');
Ketiga metode menerima string HTML, elemen DOM, atau objek jQuery. Kalau kamu memasukkan elemen yang sudah ada di halaman, jQuery akan memindahkannya, bukan menggandakannya. Untuk menggandakan, pakai .clone() lebih dulu.
Mengubah isi dan atribut elemen
Ada tiga metode yang paling sering dipakai untuk mengubah konten:
.text()mengubah teks tanpa memproses tag HTML. Aman untuk data dari pengguna..html()mengubah isi dan memproses tag HTML di dalamnya..val()mengubah nilai input, textarea, atau select.
Contoh penerapan pada form komentar:
// ambil isi input
var isi = $('#input-komentar').val();
// tampilkan sebagai teks biasa, tag HTML tidak dieksekusi
$('#pratinjau').text(isi);
// kosongkan input setelah dikirim
$('#input-komentar').val('');
Untuk atribut, gunakan .attr(). Untuk class, jQuery punya .addClass(), .removeClass(), dan .toggleClass(). Ketiganya lebih jelas maksudnya daripada mengutak-atik atribut class lewat string.
Menghapus dan mengosongkan elemen
Dua metode yang perlu kamu bedakan:
.remove()membuang elemen beserta data dan event handler yang menempel padanya..empty()membuang semua anak elemen, tetapi elemen induknya tetap ada.
Kalau kamu menghapus baris tabel dan nanti ingin memasukkannya lagi, simpan dulu referensinya. Setelah .remove(), event handler yang sudah terpasang ikut hilang. Pola umum untuk tombol hapus per baris:
$('.tombol-hapus').on('click', function () {
$(this).closest('tr').remove();
});
.closest('tr') naik ke baris tabel terdekat dari tombol yang diklik, jadi kamu tidak perlu menulis selektor baris yang rapuh. Kalau ingin memahami cara kerja .on('click') lebih jauh, ada pembahasan terpisah di Mengenal Event jQuery: click, change, dan submit.
Membungkus dan mengganti elemen
Sesekali kamu perlu mengubah struktur, misalnya membungkus gambar dengan tautan atau mengganti seluruh blok. Dua metode yang berguna:
.wrap()membungkus setiap elemen dalam koleksi dengan struktur baru..replaceWith()mengganti elemen target dengan konten baru.
// bungkus setiap gambar dengan tautan
$('.galeri img').wrap('<a class="tautan-gambar"></a>');
// ganti pesan status
$('#status').replaceWith('<p class="sukses">Data tersimpan.</p>');
.wrap() membuat pembungkus baru untuk tiap elemen, sedangkan .wrapAll() membungkus seluruh koleksi dalam satu pembungkus. Pilihan ini memengaruhi markup akhir, jadi sesuaikan dengan rancangan CSS-mu.
Kapan sebaiknya tidak memakai jQuery untuk manipulasi DOM
Untuk halaman yang hanya butuh satu-dua perubahan sederhana, API DOM bawaan sudah cukup dan tidak menambah dependensi. jQuery tetap masuk akal ketika proyekmu sudah memakainya, ketika kamu perlu mendukung banyak browser lama, atau ketika manipulasi terjadi pada banyak elemen sekaligus dengan rantai metode.
Kalau kamu membangun antarmuka yang berubah berdasarkan state, pertimbangkan library berbasis komponen. Menggabungkan keduanya bisa dilakukan, tetapi kamu perlu memastikan tidak ada dua pihak yang mengubah elemen yang sama.
Ringkasnya, pakai append/prepend untuk isi dalam elemen, after/before untuk posisi bersebelahan, text/html/val untuk mengubah konten, serta remove/empty untuk membersihkan. Buat daftar tugas dengan input, tombol tambah, dan tombol hapus per baris sebagai latihan; semua metode di atas akan terpakai sekaligus.
Pertanyaan yang Sering Diajukan
Apa beda .html() dan .text() saat mengisi elemen?
.text() memperlakukan isi sebagai teks biasa, jadi tag HTML tidak dieksekusi. .html() memproses tag HTML di dalam string. Untuk data yang berasal dari pengguna, .text() lebih aman karena mencegah eksekusi skrip yang tidak diinginkan.
Kenapa event handler hilang setelah saya memakai .remove()?
.remove() membuang elemen sekaligus membersihkan data dan event yang terikat padanya. Kalau kamu hanya ingin mengosongkan isi tanpa membuang elemen induk, pakai .empty(). Kalau elemen perlu dipasang lagi nanti, simpan referensi objek jQuery-nya sebelum dihapus.
Bisakah .append() menerima elemen DOM biasa?
Bisa. Metode ini menerima string HTML, elemen DOM, objek jQuery, atau bahkan fungsi yang mengembalikan salah satunya. Kalau kamu memasukkan elemen yang sudah ada di halaman, jQuery memindahkannya ke posisi baru, bukan menyalinnya. Gunakan .clone() bila ingin salinan.