DOM: createElement dan appendChild

Buat, sisip, hapus elemen secara dinamis.

Pahami konsepnya

Membuat elemen baru: const li = document.createElement("li"); lalu isi: li.textContent = "Item baru"; lalu sisip: parent.appendChild(li) menambah di akhir atau parent.prepend(li) di awal. insertBefore(li, referensi) menyisip sebelum elemen tertentu.

innerHTML membaca atau mengganti seluruh HTML dalam elemen: div.innerHTML = "<b>tebal</b> <i>miring</i>". CEPAT tapi berisiko XSS bila konten berasal dari pengguna. textContent AMAN — semua teks dirender sebagai teks biasa, tag tidak ditafsirkan.

remove() menghapus elemen dari DOM: element.remove(). replaceChild(new, old) mengganti elemen. classList.add/remove/toggle mengatur kelas CSS tanpa menyentuh string className langsung.

Coba contoh kode

<!doctype html>
<html>
<body>
  <ul id="daftar"></ul>
  <script>
    const ul = document.getElementById("daftar");

    // buat dan sisip
    for (let i = 1; i <= 3; i++) {
      const li = document.createElement("li");
      li.textContent = `Item ${i}`;
      li.classList.add("item");
      ul.appendChild(li);
    }

    // prepend di awal
    const pertama = document.createElement("li");
    pertama.textContent = "Paling depan";
    ul.prepend(pertama);

    // hapus terakhir
    ul.lastElementChild.remove();

    console.log(ul.children.length);  // 3
  </script>
</body>
</html>

Loop membuat tiga li lalu appendChild menambah di akhir. prepend menyisip di awal. remove() pada lastElementChild menghapus yang terakhir — hasil akhir tiga item.

Latihan singkat

Uji: fungsi buatList(items) mengembalikan array string `<li>` — 3 item harus `['<li>Item 1</li>','<li>Item 2</li>','<li>Item 3</li>']`.