by 
Menambah konten secara dinamis dipakai untuk daftar, komentar, atau baris tabel tanpa memuat ulang halaman. Artikel ini membahas cara menambahkan elemen dengan append dan prepend di jQuery.
append() dan prepend()
<script>
$("#daftar").append("<li>Item akhir</li>"); // di akhir
$("#daftar").prepend("<li>Item awal</li>"); // di awal
</script>
Contoh Kasus: Menambah Komentar Baru
<script>
$("#kirim").click(function() {
const teks = $("#komentar").val();
$("#daftar-komentar").append("<div class='komentar'></div>");
$("#daftar-komentar .komentar:last").text(teks); // aman dari XSS
$("#komentar").val("");
});
</script>
before() dan after()
<script>
$("#target").before("<p>Sebelum</p>"); // di luar, sebelum elemen
$("#target").after("<p>Sesudah</p>"); // di luar, setelah elemen
</script>
| Metode | Posisi |
|---|---|
| append/prepend | Di dalam elemen |
| before/after | Di luar elemen |
Kesimpulan
Gunakan append()/prepend() untuk menambah di dalam elemen dan before()/after() untuk di luar. Saat menampilkan data pengguna, isi dengan .text() setelahnya demi keamanan.
Referensi: untuk penjelasan lebih mendalam, kunjungi dokumentasi resmi jQuery (api.jquery.com).
