Memanipulasi Konten: innerHTML, innerText, textContent.

Setelah Anda berhasil "menangkap" elemen menggunakan selector seperti getElementById atau querySelector, langkah selanjutnya adalah mengubah isinya. Dalam JavaScript, ada tiga properti utama yang sering membingungkan pemula: innerHTML, innerText, dan textContent.

Meskipun ketiganya digunakan untuk memanipulasi konten, mereka bekerja dengan cara yang sangat berbeda.

1. innerHTML

Properti ini digunakan untuk mengambil atau mengatur isi elemen dalam bentuk HTML mentah. Artinya, jika Anda memasukkan tag HTML (seperti <b> atau <div>), browser akan merendernya sebagai elemen HTML sungguhan.

• Kegunaan: Menambahkan elemen baru secara dinamis (seperti membuat list atau tebal).

• Contoh:

  JavaScript

  const box = document.getElementById("box");
  box.innerHTML = "<strong>Halo!</strong> Ini teks tebal.";
  

  Hasil di layar: Halo! Ini teks tebal.

2. innerText

Properti ini hanya berfokus pada teks yang terlihat oleh pengguna di layar. Ia sangat pintar karena ia memperhatikan CSS. Jika ada bagian teks yang disembunyikan (misalnya dengan display: none), innerText tidak akan mengambilnya.

• Kegunaan: Mengambil teks murni yang benar-benar tampak di mata user.

• Contoh:

 const judul = document.querySelector("h1"); judul.innerText = "Selamat Datang"; ``` --- ## 3. textContent
`textContent` mengambil atau mengatur **seluruh isi teks** di dalam elemen, termasuk teks yang ada di dalam tag yang tersembunyi. Ia tidak peduli dengan CSS dan tidak memproses tag HTML (semuanya dianggap teks biasa). * **Kegunaan:** Lebih cepat secara performa dibandingkan `innerText` dan lebih aman untuk menyisipkan teks murni.
* **Contoh:** ```javascript const info = document.getElementById("info"); info.textContent = "<b>Bukan Tebal</b>"; ``` *Hasil di layar: `<b>Bukan Tebal</b>` (Tag-nya muncul sebagai teks, tidak diproses).* --- ## Perbedaan Visual: Kasus "Teks Tersembunyi" Bayangkan Anda memiliki HTML berikut:
```html
<div id="demo"> Halo <span style="display:none">Dunia</span>
</div>

Jika kita memanggil ketiga properti tersebut lewat JavaScript:

Ringkasan & Kapan Menggunakan Apa?

1. Gunakan innerHTML jika Anda ingin menyisipkan struktur HTML baru ke dalam elemen. Hati-hati: Jangan gunakan ini untuk input dari user karena risiko keamanan (XSS).

2. Gunakan innerText jika Anda hanya ingin mengubah teks dan ingin hasil yang sesuai dengan apa yang dilihat user di layar.

3. Gunakan textContent untuk performa yang lebih baik jika Anda hanya berurusan dengan teks murni dan ingin memastikan tidak ada tag HTML yang diproses secara tidak sengaja.

Tips Keamanan: Selalu prioritaskan textContent jika Anda hanya ingin menampilkan teks biasa dari input pengguna agar aplikasi Anda tidak bisa "disuntik" kode jahat lewat tag <script>.