menengahdombrowserMenengah3 mnt baca

DOM: Membuat & Menambah Elemen

Membangun konten dinamis dari JavaScript: createElement, appendChild versus append, menghapus elemen, dan pola render list dari array yang menjadi fondasi semua aplikasi interaktif.

Kenapa Membuat Elemen dari JS?

HTML statis hanya bisa menampilkan konten yang ditulis di file. Tapi aplikasi nyata butuh konten yang lahir saat program berjalan: hasil pencarian, daftar chat, notifikasi, baris tabel dari API. Semua itu dibuat dengan document.createElement() lalu ditempel ke halaman dengan appendChild() atau append(). Ini adalah fondasi cara kerja framework seperti React di balik layar: mereka pun akhirnya membuat dan menempel elemen DOM.

Membuat dan Menempel: Contoh Sederhana

javascript

const li = document.createElement("li"); // buat <li> di memori (belum tampil!)
li.textContent = "Item baru";
li.className = "tugas";
document.getElementById("daftar").appendChild(li); // sekarang tampil

Perhatikan dua tahapnya: createElement hanya membuat node di memori, ia belum terlihat sampai ditempel ke elemen yang sudah ada di halaman. Kamu juga bisa mengatur atribut sebelum menempel:

javascript

const img = document.createElement("img");
img.src = "kucing.jpg";
img.alt = "Kucing lucu";
document.getElementById("galeri").appendChild(img);

Membangun List Dinamis dari Array

Ini pola paling penting modul ini, dan dipakai di hampir semua aplikasi:

javascript

const buah = ["Apel", "Mangga", "Jeruk"];
const ul = document.getElementById("daftar");

buah.forEach(nama => {
  const li = document.createElement("li");
  li.textContent = nama;
  ul.appendChild(li);
});

Contoh realistis: render kartu produk dari data, lengkap dengan harga dan tombol.

javascript

const produk = [
  { nama: "Kopi Tubruk", harga: 8000 },
  { nama: "Teh Manis", harga: 5000 },
];

const wadah = document.getElementById("daftar");
produk.forEach(p => {
  const li = document.createElement("li");

  const nama = document.createElement("strong");
  nama.textContent = p.nama;

  const harga = document.createElement("span");
  harga.textContent = " Rp" + p.harga.toLocaleString("id-ID");

  const btn = document.createElement("button");
  btn.textContent = "Beli";
  btn.addEventListener("click", () => alert("Membeli " + p.nama));

  li.append(nama, harga, btn); // append bisa banyak sekaligus!
  wadah.appendChild(li);
});

append vs appendChild

appendChild(node): hanya SATU node, dan me-return node tersebut. Cara klasik yang selalu aman.
append(...): lebih modern, bisa BANYAK node sekaligus, bahkan string langsung (ul.append("teks", li1, li2)). String otomatis jadi text node.

Untuk kode baru, append biasanya lebih ringkas.

Menghapus Elemen

javascript

li.remove();       // hapus dirinya sendiri dari halaman
ul.innerHTML = ""; // kosongkan SEMUA anak sekaligus (reset cepat)
tugasLama.replaceWith(tugasBaru); // ganti elemen dengan yang baru

innerHTML = "" adalah cara tercepat mengosongkan wadah sebelum render ulang, pola yang dipakai di proyek todo nanti.

Jebakan Umum

Menempel elemen yang sama dua kali tidak menggandakannya: node DOM hanya bisa ada di satu tempat. appendChild kedua kalinya MEMINDAHKAN, bukan meng-copy. Butuh duplikat? Pakai el.cloneNode(true).
innerHTML = "" juga menghapus semua event listener milik anak-anaknya. Itu justru yang diinginkan saat render ulang penuh.
Untuk list SANGAT besar yang sering di-update, menempel satu per satu memicu reflow berulang. Alternatif cepat: bangun satu string HTML lalu set innerHTML sekali, atau pakai DocumentFragment sebagai wadah sementara.

Ringkasan

Buat node dengan createElement, isi kontennya (textContent untuk teks user agar aman), tempel dengan appendChild atau append, hapus dengan remove() atau kosongkan dengan innerHTML = "". Pola "array jadi list elemen" adalah fondasi semua render dinamis: hasil pencarian, feed, tabel, dan nanti aplikasi todo-mu.

Live Playground

export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}

Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Daftar Tugas Dinamis

Diberi array tugas. Render tiap tugas sebagai li di #daftar. Tambahkan satu li "Tugas bonus" di akhir dengan append. Merender list dari array adalah operasi paling fundamental dalam front-end: dari feed media sosial sampai daftar produk toko online, semuanya memakai pola createElement dalam loop seperti ini.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />

</head>
<body>
<h1>Halo JS</h1>
<p>Buka console preview untuk melihat output.</p>
<script src="index.js"></script>
</body>
</html>

Open Sandbox