Mengubah Teks Elemen

Setelah elemen terpilih, perubahan yang paling sering dilakukan adalah mengganti isinya: jumlah barang pada keranjang diperbarui, status form berubah menjadi “Tersimpan”, sapaan menyesuaikan jam. Pada chapter ini kita mempelajari dua properti untuk itu — textContent dan innerHTML — beserta alasan mengapa textContent menjadi pilihan bawaan. Kita juga mengubah nilai input lewat properti value dan menyusun teks dinamis dengan template literal. Sebagai contoh utuh, kita membuat halaman yang menyapa pengunjung sesuai jam perangkat.

textContent: Teks Murni #

Properti textContent mengganti seluruh isi elemen dengan teks, dan membaca isi elemen sebagai teks juga:

const judul = document.getElementById("judul");
const teksLama = judul.textContent;   // membaca isi saat ini
judul.textContent = "Menu Hari Ini";  // mengganti isi

Sifat penting textContent ada pada perlakuannya terhadap string yang diisi: browser memperlakukan nilainya sebagai teks murni. Bila string tersebut memuat karakter seperti <h2>, karakter itu tampil apa adanya, bukan diubah menjadi elemen heading. Perlakuan konsisten inilah yang membuat textContent aman untuk teks dari sumber mana pun, termasuk input pengunjung.

innerHTML: Mem-parsing HTML #

Properti innerHTML bekerja berbeda. Browser membaca string yang diisi sebagai markup, lalu membentuk elemen sungguhan darinya:

daftar.innerHTML = "<li>Soto ayam</li><li>Es teh</li>";

Setelah baris di atas berjalan, halaman memiliki dua elemen li sungguhan, lengkap dengan bullet dan gaya CSS milik daftar. Kemampuan ini praktis ketika markup memang perlu dibentuk dari data milik kode kita sendiri, misalnya daftar menu yang datang dari array internal aplikasi.

Aturan Praktis: textContent sebagai Default #

Dengan dua properti di atas, pedoman pemilihannya singkat:

• Isi yang murni teks → textContent, selalu.
• Markup yang ditulis sendiri dan statis → tulis langsung di HTML, tanpa script.
• Markup dinamis dari data internal yang tepercaya → innerHTML boleh dipakai dengan kesadaran penuh atas risikonya.

Kebanyakan kebutuhan nyata — mengganti label, menampilkan angka, mengubah status — termasuk kelompok pertama. Itulah alasan textContent dijadikan default pada section ini.

Mengubah Value Input #

Input form tidak mengubah isi lewat textContent, karena nilai input tersimpan pada properti tersendiri bernama value:

const kolomEmail = document.getElementById("email");
kolomEmail.value = "[email protected]";  // mengisi kolom
const emailTertulis = kolomEmail.value; // membaca isi kolom

Pola yang sama berlaku untuk textarea dan select. Properti value akan sering kita pegang pada chapter-chapter event dan validasi form, karena isi kolom inilah yang diperiksa dan dikirim.

Template Literal #

Menyusun kalimat dari beberapa nilai dengan operator + cepat menjadi panjang dan sulit dibaca. Template literal menawarkan bentuk yang lebih rapi: string dibungkus tanda kutip terbalik (backtick), dan ekspresi ditulis di dalam ${}:

const nama = "Budi";
const jumlahPesan = 2;
const sapaan = `Halo, ${nama}! Terdapat ${jumlahPesan} pesan baru.`;
// sapaan berisi: "Halo, Budi! Terdapat 2 pesan baru."

Ekspresi di dalam ${} dievaluasi saat string dibentuk, dan di sana boleh berupa variabel, perhitungan, atau pemanggilan fungsi. Perhatikan bahwa tanda kutip terbalik berbeda dari apostrof biasa; keduanya tidak saling menggantikan.

Contoh Lengkap: Sapaan Sesuai Jam #

Contoh berikut menggabungkan seluruh materi chapter: halaman menyapa pengunjung sesuai jam perangkat. Fungsi tentukanSalam menentukan pilihan kata dari angka jam, objek Date milik JavaScript menyediakan jam tersebut, dan template literal merangkai kalimat akhirnya.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sapaan Sesuai Jam</title>
  <script src="sapaan-jam.js" defer></script>
</head>
<body>
  <h1>Portal Belajar Komunitas</h1>
  <p id="sapaan">Memuat sapaan…</p>
</body>
</html>

// Menentukan salam sesuai jam (0-23) dari jam perangkat
function tentukanSalam(jam) {
  if (jam >= 4 && jam < 11) {
    return "Selamat pagi";
  }
  if (jam >= 11 && jam < 15) {
    return "Selamat siang";
  }
  if (jam >= 15 && jam < 19) {
    return "Selamat sore";
  }
  return "Selamat malam";
}

const jamSekarang = new Date().getHours();
const salam = tentukanSalam(jamSekarang);
const namaAnggota = "Budi";

const sapaan = document.getElementById("sapaan");
sapaan.textContent = `${salam}, ${namaAnggota}! Selamat datang kembali.`;

Output yang Dihasilkan:

Contoh pada pukul 14.30, jendela browser menampilkan:
  - Heading "Portal Belajar Komunitas"
  - Paragraf sapaan:
    "Selamat siang, Budi! Selamat datang kembali."
Pada pukul 20.00, paragraf yang sama menampilkan:
  - "Selamat malam, Budi! Selamat datang kembali."

Mari kita telaah peran setiap baris penting di atas:

1. Baris 2-13 JS (fungsi tentukanSalam): menerima angka jam 0-23 dan mengembalikan salah satu dari empat salam; setiap rentang ditulis eksplisit, sehingga jam 0-3 terjebak ke cabang terakhir berisi “Selamat malam”.
2. Baris 15 JS (new Date().getHours()): objek Date membaca jam perangkat saat halaman dibuka, dalam bentuk angka 0-23.
3. Baris 16 JS (pemanggilan fungsi): hasil getHours() menjadi masukan tentukanSalam, dan keluarannya disimpan di variabel salam.
4. Baris 19-20 JS (pemilihan dan penulisan): paragraf sapaan dipilih lewat id-nya, lalu textContent mengganti teks sementara “Memuat sapaan…”.
5. Template literal pada baris 20: tiga nilai — salam, nama, dan sisa kalimat — dirangkai tanpa deretan operator +.

Karena isi yang diubah murni teks yang ditentukan oleh kode kita, textContent dipakai tanpa keraguan. Bila suatu saat sapaan perlu memuat markup, keputusan memakai innerHTML wajib melewati pertimbangan risiko pada bagian di atas. Dengan teks kini terkendali, chapter berikutnya melangkah ke perubahan penampilan lewat class elemen.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Node: textContent
• MDN Web Docs — Element: innerHTML
• MDN Web Docs — Template literals

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sapaan Sesuai Jam</title>
  <script src="sapaan-jam.js" defer></script>
</head>
<body>
  <h1>Portal Belajar Komunitas</h1>
  <p id="sapaan">Memuat sapaan…</p>
</body>
</html>

// Menentukan salam sesuai jam (0-23) dari jam perangkat
function tentukanSalam(jam) {
  if (jam >= 4 && jam < 11) {
    return "Selamat pagi";
  }
  if (jam >= 11 && jam < 15) {
    return "Selamat siang";
  }
  if (jam >= 15 && jam < 19) {
    return "Selamat sore";
  }
  return "Selamat malam";
}

const jamSekarang = new Date().getHours();
const salam = tentukanSalam(jamSekarang);
const namaAnggota = "Budi";

const sapaan = document.getElementById("sapaan");
sapaan.textContent = `${salam}, ${namaAnggota}! Selamat datang kembali.`;