Cara Menampilkan Data ke Halaman Web dengan JavaScript
Menampilkan data dari JavaScript ke halaman web sering membingungkan pemula. Panduan ini membahas pilihan metode dan kapan menggunakannya.
Kamu punya data di JavaScript, misalnya daftar nama atau angka dari perhitungan, dan bingung bagaimana cara menampilkan data JavaScript ke halaman web. Ada beberapa cara yang bisa dipakai, dari yang paling sederhana sampai yang lebih aman untuk data dari pengguna. Pilih metode yang sesuai dengan jenis data dan kebutuhanmu.
Mengenal properti innerHTML dan textContent
Dua properti ini paling sering dipakai untuk mengisi elemen HTML dengan data dari JavaScript. Keduanya punya perilaku berbeda yang perlu kamu pahami sebelum memilih.
innerHTML memungkinkan kamu menyisipkan tag HTML, misalnya untuk menampilkan teks tebal atau tautan di dalam paragraf. Contohnya:
document.getElementById('output').innerHTML = '<strong>Halo</strong> dunia';Kode di atas merender teks “Halo” dalam format tebal. innerHTML memproses string sebagai HTML. Jika data berasal dari input pengguna dan tidak disanitasi, risiko injeksi skrip bisa muncul. Untuk data yang kamu kontrol sendiri, innerHTML aman dan praktis.
textContent hanya menampilkan teks apa adanya. Tag HTML dianggap sebagai teks biasa. Ini pilihan yang lebih aman untuk menampilkan data yang tidak perlu format khusus. Contoh:
document.getElementById('output').textContent = '<strong>Halo</strong> dunia';Hasilnya, pengguna melihat tulisan “<strong>Halo</strong> dunia” secara literal. Gunakan textContent jika kamu hanya perlu menampilkan teks murni tanpa interpretasi HTML.
Membuat elemen baru dengan createElement
Ketika kamu perlu menambahkan banyak elemen secara dinamis, misalnya daftar item, membuat elemen satu per satu dengan createElement memberi kontrol lebih besar. Kamu bisa mengatur atribut, kelas, dan event listener pada setiap elemen sebelum memasukkannya ke DOM.
Langkahnya: buat elemen dengan document.createElement, isi properti textContent atau innerHTML, lalu tambahkan ke parent menggunakan appendChild. Contoh untuk menampilkan daftar buah:
const daftar = document.getElementById('daftar');
const buah = ['Apel', 'Jeruk', 'Mangga'];
buah.forEach(item => {
const li = document.createElement('li');
li.textContent = item;
daftar.appendChild(li);
});Metode ini menghindari parsing HTML berulang dan membuat kode lebih mudah dibaca, terutama jika kamu perlu menambahkan kelas atau atribut lain pada setiap item.
Menggunakan template literals untuk HTML yang kompleks
Jika kamu ingin membuat struktur HTML yang lebih rumit, seperti kartu produk dengan gambar dan deskripsi, template literals bisa membantu. Kamu bisa menyisipkan ekspresi JavaScript langsung di dalam string HTML.
Contoh:
const produk = { nama: 'Kaos', harga: 50000 };
const html = `<div class="card">
<h3>${produk.nama}</h3>
<p>Harga: Rp${produk.harga}</p>
</div>`;
document.getElementById('container').innerHTML = html;Pastikan data yang dimasukkan ke template literals sudah aman. Jika berasal dari input pengguna, lakukan sanitasi atau gunakan textContent untuk bagian yang rawan.
Kapan memilih innerHTML, textContent, atau createElement?
Berikut panduan singkat berdasarkan situasi:
- textContent: untuk menampilkan teks murni tanpa HTML, terutama data dari pengguna.
- innerHTML: untuk menyisipkan HTML statis yang kamu kontrol sendiri, atau setelah data disanitasi.
- createElement: untuk membuat banyak elemen dinamis dengan atribut dan event listener yang berbeda.
- template literals + innerHTML: untuk struktur HTML kompleks yang datanya sudah aman.
Hindari mencampur penggunaan innerHTML dengan data pengguna tanpa validasi. Jika kamu perlu menangani error saat parsing atau eksekusi, gunakan try-catch agar halaman tidak berhenti bekerja.
Contoh praktis: menampilkan data dari array ke tabel
Misalnya kamu punya array objek berisi data siswa dan ingin menampilkannya dalam tabel. Kamu bisa menggunakan createElement untuk setiap baris, atau membangun string HTML dengan template literals.
Dengan createElement:
const siswa = [
{ nama: 'Andi', nilai: 80 },
{ nama: 'Budi', nilai: 90 }
];
const tbody = document.querySelector('#tabel-siswa tbody');
siswa.forEach(s => {
const tr = document.createElement('tr');
const tdNama = document.createElement('td');
tdNama.textContent = s.nama;
const tdNilai = document.createElement('td');
tdNilai.textContent = s.nilai;
tr.appendChild(tdNama);
tr.appendChild(tdNilai);
tbody.appendChild(tr);
});Dengan template literals:
const html = siswa.map(s => `<tr><td>${s.nama}</td><td>${s.nilai}</td></tr>`).join('');
document.querySelector('#tabel-siswa tbody').innerHTML = html;Keduanya valid. Pilih yang paling nyaman bagimu dan sesuai dengan kebutuhan sanitasi data.
Tips tambahan untuk pemula
- Selalu uji dengan data yang mengandung karakter khusus seperti < atau & untuk melihat perilakunya.
- Gunakan console.log untuk memeriksa nilai sebelum memasukkannya ke DOM.
- Jika menampilkan data dari server, pertimbangkan penggunaan async/await agar kode lebih rapi.
- Untuk daftar yang panjang, pertimbangkan performa: createElement dalam loop bisa lebih lambat daripada innerHTML untuk jumlah besar, tetapi lebih aman.
Ringkasan
Menampilkan data ke halaman web bisa dilakukan dengan textContent, innerHTML, createElement, atau kombinasi template literals. Pilih berdasarkan jenis data dan tingkat keamanan yang dibutuhkan. Mulailah dengan textContent untuk teks murni, dan gunakan createElement ketika kamu perlu kontrol lebih atas elemen yang dibuat.
Pertanyaan yang Sering Diajukan
Apa perbedaan utama innerHTML dan textContent?
innerHTML memproses string sebagai HTML, sehingga tag akan dirender. textContent menampilkan string apa adanya, termasuk tag sebagai teks biasa. Gunakan textContent untuk data yang tidak perlu format HTML.
Apakah aman menggunakan innerHTML dengan data dari pengguna?
Tidak disarankan tanpa sanitasi. Data pengguna bisa mengandung skrip berbahaya. Sanitasi input atau gunakan textContent jika hanya perlu menampilkan teks.
Kapan sebaiknya menggunakan createElement daripada innerHTML?
Saat kamu perlu membuat banyak elemen dengan atribut atau event listener yang berbeda, createElement memberi kontrol lebih dan menghindari parsing HTML berulang. Untuk struktur HTML kompleks yang datanya aman, innerHTML dengan template literals lebih ringkas.
