Mengubah teks elemen secara dinamis dipakai untuk pesan status, hitung mundur, atau memperbarui hasil perhitungan tanpa memuat ulang halaman. Artikel ini membahas cara mengubah teks elemen di JavaScript.
Properti textContent
<p id="pesan">Teks lama</p>
<script>
document.getElementById("pesan").textContent = "Teks baru";
</script>
Contoh Kasus: Penghitung Karakter Langsung
<script>
const input = document.getElementById("bio");
const info = document.getElementById("sisa");
input.addEventListener("input", function() {
info.textContent = (160 - input.value.length) + " karakter tersisa";
});
</script>
textContent vs innerHTML
textContent memperlakukan isi sebagai teks murni, sehingga lebih aman dari serangan XSS. Gunakan innerHTML hanya bila memang perlu menyisipkan tag HTML.
<script> el.textContent = "<b>Halo</b>"; // tampil apa adanya: <b>Halo</b> </script>
Kesimpulan
Gunakan textContent untuk mengubah teks elemen secara aman, terutama saat menampilkan data dari pengguna. Cocok untuk penghitung karakter, pesan status, atau hitung mundur.
Referensi: untuk penjelasan lebih mendalam, kunjungi dokumentasi resmi JavaScript (MDN).

