by 
Membuat elemen secara dinamis dipakai untuk menambah baris daftar, kartu produk, atau komentar tanpa memuat ulang halaman. Artikel ini membahas cara membuat elemen HTML secara dinamis di JavaScript.
document.createElement()
<script>
const li = document.createElement("li");
li.textContent = "Item baru";
li.classList.add("aktif");
document.getElementById("daftar").appendChild(li);
</script>
Contoh Kasus: Menambah Komentar ke Daftar
<script>
function tambahKomentar(teks) {
const div = document.createElement("div");
div.classList.add("komentar");
div.textContent = teks; // aman dari XSS karena textContent
document.getElementById("komentar").appendChild(div);
}
tambahKomentar("Artikel yang bagus!");
</script>
createElement vs innerHTML
createElement() lebih aman dan efisien untuk menambah satu elemen, terutama bila isinya berasal dari pengguna, karena menghindari risiko XSS dari innerHTML.
Kesimpulan
Gunakan createElement() untuk membangun elemen baru, atur isi dan atributnya, lalu sisipkan dengan appendChild(). Ini cara aman membangun konten dinamis tanpa risiko keamanan innerHTML.
Referensi: untuk penjelasan lebih mendalam, kunjungi dokumentasi resmi JavaScript (MDN).
