Cara Mengambil dan Mengubah Konten HTML dengan jQuery

Terkadang kita perlu menyisipkan HTML, bukan sekadar teks, misalnya membangun daftar atau kartu dari data. Artikel ini membahas cara mengambil dan mengubah konten HTML dengan jQuery.

Metode .html()

<div id="wadah"></div>

<script>
$("#wadah").html("<strong>Halo</strong>"); // render sebagai HTML
const isi = $("#wadah").html();               // ambil isi HTML
</script>

Contoh Kasus: Membangun Daftar dari Data

<script>
const buah = ["Apel", "Mangga", "Jeruk"];
const html = buah.map(b => "<li>" + b + "</li>").join("");
$("#daftar").html(html);
</script>

Peringatan Keamanan (XSS)

Jangan masukkan data pengguna langsung ke .html() karena berisiko serangan XSS. Untuk teks biasa dari pengguna, gunakan .text().

text() vs html()

MetodeTag HTMLKeamanan
.text()Tampil apa adanyaAman
.html()DirenderHati-hati XSS

Kesimpulan

Gunakan .html() saat perlu menyisipkan tag HTML, misalnya membangun daftar dari data internal. Untuk data pengguna, selalu pilih .text() demi keamanan.

Referensi: untuk penjelasan lebih mendalam, kunjungi dokumentasi resmi jQuery (api.jquery.com).

Baca Juga

Ali Akbar

Software Developer yang fokus mengembangkan aplikasi berbasis Web dan Desktop. Senang mempelajari teknologi baru terutama di bidang web design dan web development.

View all posts by Ali Akbar →

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *