Kamu sedang membangun daftar komentar yang bisa diperbarui tanpa memuat ulang halaman, lalu bingung harus memakai append atau appendTo. Dua-duanya menambahkan elemen, tapi arah dan cara penggunaannya berbeda. Artikel ini membandingkan lima metode jQuery untuk menyisipkan elemen ke DOM supaya kamu bisa memilih sesuai kebutuhan.
append: menaruh elemen di akhir induk
append menambahkan konten sebagai anak terakhir dari elemen yang dipilih. Kalau kamu punya daftar <ul id="daftar"> dan ingin menambah <li> baru di bagian bawah, append adalah pilihan langsung.
$('#daftar').append('<li>Item baru</li>');Metode ini juga menerima objek jQuery atau elemen DOM, bukan hanya string HTML. Perhatikan bahwa append memindahkan elemen yang sudah ada di halaman jika kamu memberikannya sebagai argumen. Jadi kalau kamu ingin menyalin, gunakan .clone() lebih dulu.
prepend: menaruh elemen di awal induk
prepend bekerja seperti append, tetapi menempatkan konten di posisi pertama di dalam induk. Cocok untuk notifikasi yang harus muncul paling atas atau item terbaru pada daftar yang diurutkan dari yang terakhir.
$('#daftar').prepend('<li>Item terbaru</li>');Kalau kamu sering menambahkan elemen di awal dan akhir, perhatikan urutan event yang mungkin terpicu. Event delegation dengan jQuery memungkinkan event tetap bekerja pada elemen yang ditambahkan belakangan, asalkan kamu memasangnya pada induk yang sudah ada. Untuk memahami perilaku event pada elemen baru, baca Mengenal Event jQuery: click, change, dan submit.
after dan before: menyisipkan di luar elemen
after menambahkan konten tepat setelah elemen yang dipilih, sebagai saudara (sibling), bukan anak. before menambahkan tepat sebelum elemen. Keduanya berguna ketika kamu ingin menyisipkan elemen di antara dua elemen yang sudah ada tanpa mengubah struktur induk.
$('#item-acuan').after('<li>Item sisipan</li>');Kalau kamu memakai after pada elemen yang tidak punya induk (misalnya elemen yang belum ditempel ke dokumen), hasilnya bisa tidak seperti yang diharapkan. Pastikan elemen acuan sudah ada di DOM.
html: mengganti seluruh isi
html mengganti seluruh konten di dalam elemen yang dipilih dengan konten baru. Ini bukan penambahan, melainkan penggantian. Metode ini cepat untuk merender ulang seluruh daftar, tetapi semua event handler yang terpasang langsung pada elemen anak akan hilang. Kamu perlu memasang ulang event atau menggunakan event delegation pada induk.
$('#daftar').html('<li>Satu</li><li>Dua</li>');Hindari html jika kamu hanya perlu menambah satu elemen, karena memaksa browser memproses ulang seluruh isi. Untuk manipulasi DOM yang lebih terkontrol, lihat Cara Manipulasi DOM dengan jQuery untuk Pemula.
appendTo, prependTo, insertAfter, insertBefore
Empat metode ini adalah kebalikan dari metode sebelumnya. Alih-alih memilih induk lalu menambahkan konten, kamu memilih konten lalu menentukan tujuannya. Contohnya, $('<li>Baru</li>').appendTo('#daftar') setara dengan $('#daftar').append('<li>Baru</li>'). Gunakan bentuk ini ketika kamu sudah memiliki elemen yang dibuat terpisah dan ingin memindahkannya ke lokasi tertentu.
Perbandingan singkat
| Metode | Posisi hasil | Efek pada elemen yang ada |
|---|---|---|
| append | Anak terakhir | Menambah, tidak menggeser |
| prepend | Anak pertama | Menambah, tidak menggeser |
| after | Setelah elemen (sibling) | Menambah, tidak menggeser |
| before | Sebelum elemen (sibling) | Menambah, tidak menggeser |
| html | Mengganti seluruh isi | Menghapus semua anak lama |
Pilihan metode juga memengaruhi performa jika kamu menambahkan banyak elemen sekaligus. Menggabungkan string HTML lalu memanggil append sekali biasanya lebih cepat daripada memanggil append berulang kali dalam loop.
Kalau kamu bekerja dengan data dari server dan perlu menyalin objek konfigurasi sebelum merender, pastikan kamu memahami perbedaan shallow dan deep copy. Baca Cara Menyalin Objek di JavaScript: Shallow vs Deep Copy agar tidak mengalami bug akibat referensi yang sama.
Saat istirahat sejenak dari coding, banyak penggemar olahraga menonton pertandingan basket atau sepak bola secara streaming. Jika kamu ingin menonton bareng host yang menghibur, coba kunjungi tarkamlive untuk mencari tayangan gratis.
Ringkasan
Gunakan append atau prepend untuk menambah anak di dalam elemen, after atau before untuk menyisipkan di luar elemen, dan html hanya ketika kamu memang ingin mengganti seluruh isi. Sesuaikan pilihan dengan posisi yang diinginkan dan dampak pada event yang sudah terpasang.
Pertanyaan yang Sering Diajukan
Apa beda append dan after?
append menambahkan elemen sebagai anak terakhir di dalam induk, sedangkan after menambahkan elemen sebagai saudara tepat setelah elemen acuan. Posisi dan strukturnya berbeda.
Apakah append bisa menambahkan beberapa elemen sekaligus?
Bisa. Kamu dapat memberikan string HTML yang berisi beberapa elemen, atau array elemen DOM, dan jQuery akan memasukkannya secara berurutan.
Kapan sebaiknya memakai html daripada append?
Pakai html ketika kamu perlu mengganti seluruh konten, misalnya merender ulang daftar dari data baru. Untuk penambahan satu atau dua elemen, append lebih aman karena tidak menghapus event handler yang sudah ada.