Cara Mengubah Teks Elemen di JavaScript

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).

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 *