Elemen Hilang saat Set HTML? Cara Mengatasi Innerhtml Of Null Javascript

Ditulis oleh JavaScript

Error Cannot set properties of null (setting ‘innerHTML’) berarti kode Anda memanggil document.querySelector() atau getElementById() yang hasilnya null, lalu Anda memaksa mengisi innerHTML. Perbaikan tercepat: pastikan ID di HTML sama persis dengan selector di JavaScript, lalu pastikan script berjalan setelah elemen tersedia.

Penyebab Cannot Set Properties of Null di innerHTML

Browser mengembalikan null ketika elemen target tidak ditemukan. Ini TypeError runtime, bukan SyntaxError. Kode berhenti di baris tersebut.

  • Typo selector: #hasil di JS, tetapi id="Hasil" di HTML.
  • Elemen belum ada: script di <head> jalan sebelum DOM selesai dimuat.
  • Elemen dinamis: elemen dibuat lewat fetch, template, atau framework setelah kode manipulasi jalan.
  • Elemen terhapus: dipindah halaman, diganti innerHTML induknya, atau berada di iframe berbeda.

Tabel Cek Cepat Error innerHTML of Null

Cek tiga kondisi ini sebelum menambah guard atau optional chaining:

Error/Kondisi Penyebab Solusi
querySelector('.box') null Kelas salah atau elemen belum dirender Cocokkan selector, cek tab Elements
getElementById('data') null ID ganda atau typo huruf besar Pakai ID unik dan case-sensitive
ID ada tetapi tetap null Script jalan terlalu awal Pindah script ke akhir body

BACA JUGA:

Cara Memperbaiki innerHTML of Null dengan Langkah Bernomor

  1. Buka DevTools, jalankan document.querySelector('#hasil') dan lihat apakah hasilnya elemen atau null.
  2. Samakan selector dengan HTML. Periksa huruf besar, tanda # untuk ID, dan titik untuk class.
  3. Pindah <script> ke akhir <body> atau bungkus dengan DOMContentLoaded.
  4. Tambah guard agar kode gagal secara aman bila elemen memang opsional.
  5. Pakai textContent bila hanya menampilkan teks, bukan markup HTML.
// Salah: elemen null langsung diisi
document.querySelector('#hasil').innerHTML = data;

// Benar: cek elemen dan timing DOM
document.addEventListener('DOMContentLoaded', () => {
  const el = document.querySelector('#hasil');
  if (!el) return;
  el.textContent = data;
});

Guard di atas menghentikan eksekusi bila elemen tidak ada. textContent juga menghindari risiko XSS dari data pengguna.

Cara Mencegah Error Terulang

  • Manipulasi DOM hanya setelah elemen dipastikan tampil di halaman.
  • Gunakan satu ID unik untuk satu elemen target manipulasi.
  • Untuk konten dinamis, jalankan kode setelah fetch selesai atau setelah komponen dirender.
  • Buat fungsi reusable yang selalu memvalidasi hasil querySelector.
function setHTML(selector, html) {
  const el = document.querySelector(selector);
  if (!el) return false;
  el.innerHTML = html;
  return true;
}

FAQ

Kenapa innerHTML of null muncul padahal ID sudah ada?

Umumnya script berjalan sebelum DOM siap atau elemen dibuat ulang secara dinamis.

Apakah script harus selalu di akhir body?

Tidak wajib, script di akhir body atau event DOMContentLoaded sama-sama mencegah DOM belum siap.

Kapan memakai textContent daripada innerHTML?

Pakai textContent untuk teks biasa dari pengguna agar lebih aman dan cepat.

Artikel Terkait