Salah satu fitur yang sangat berguna dalam pengembangan web adalah kemampuan untuk mengubah teks di dalam elemen HTML menggunakan JavaScript. Hal ini memungkinkan kita untuk membuat interaksi dinamis di halaman web kita. Berikut adalah langkah-langkahnya:
- Siapkan elemen HTML yang ingin kita ubah teksnya. Misalnya, kita akan mengubah teks pada elemen dengan id “judul”.
- Gunakan JavaScript untuk mengakses elemen tersebut menggunakan metode
getElementById()
. - Gunakan metode
innerHTML
untuk mengubah isi dari elemen tersebut dengan teks baru yang diinginkan.
Berikut adalah contoh kode JavaScript untuk mengganti teks di dalam elemen HTML:
function gantiTeks() {
document.getElementById("judul").innerHTML = "Teks telah diganti!";
}
Anda juga bisa menggunakan metode textContent
jika Anda hanya ingin mengubah teks tanpa memperhitungkan elemen HTML di dalamnya.
Untuk mengganti teks saat tombol ditekan, berikut adalah contoh kode HTML yang menghubungkan fungsi JavaScript dengan sebuah tombol:
<button onclick="gantiTeks()">Ganti Teks</button>
Setelah tombol ditekan, fungsi gantiTeks()
akan dipanggil dan teks di dalam elemen dengan id “judul” akan berubah menjadi “Teks telah diganti!”.
Dengan menggunakan JavaScript, kita dapat dengan mudah mengubah teks di dalam elemen HTML sesuai dengan kebutuhan, memberikan interaksi yang dinamis pada halaman web.