← JavaScript30 / 69

Merender list dari array

Inilah pola inti semua framework modern, dan sekarang kamu melakukannya manual: ambil data → ubah jadi HTML → masukkan ke DOM. Setelah memahami ini, map di React akan terasa jelas sebagai versi otomatis dari apa yang kamu tulis di sini. Untuk daftar panjang, kumpulkan dulu elemennya di DocumentFragment lalu masukkan sekali — memasukkan satu per satu ke DOM memaksa browser menghitung ulang layout berkali-kali.

👀 Contoh dulu

const data = ['Kopi', 'Teh'];
const ul = document.querySelector('ul');

data.forEach((nama) => {
  const li = document.createElement('li');  // 1. buat elemen
  li.textContent = nama;                    // 2. isi teksnya
  ul.append(li);                            // 3. masukkan ke DOM
});

Hasilnya: Muncul daftar berisi dua item: Kopi dan Teh.

💡 Tiga langkah ini pola universal: buat → isi → masukkan. React hanya mengotomatiskan proses yang sama.

📝 Sekarang giliranmu

Untuk setiap item di array buah, buat elemen li dengan document.createElement, isi textContent-nya, dan tambahkan ke #daftar dengan append.

Preview

← Sebelumnya Berikutnya →