Jago JavaScript 2 #6: Membuat & Menghapus Elemen (DOM Node)

Di materi ini, kita bakal belajar cara "melahirkan" elemen baru ke dalam halaman web secara dinamis dan cara "membuang" elemen yang sudah tidak terpakai.

🧩 Apa yang Akan Dipelajari

• Menggunakan createElement untuk membuat tag baru.
• Memberikan isi dan class pada elemen baru tersebut.
• Menggunakan appendChild atau prepend untuk menaruh elemen di dalam HTML.
• Menggunakan remove untuk menghapus elemen.

⚙️ Persiapan

Siapkan struktur HTML sederhana ini, kita bakal bikin daftar belanjaan yang bisa nambah sendiri:

<ul id="daftar-buah">
    <li>Apel</li>
</ul>
<button id="btn-tambah">Tambah Mangga</button>
<button id="btn-hapus">Hapus Apel</button>

🚀 Langkah-Langkah

1. Membuat Elemen Baru (createElement)

Langkah pertama adalah membuat "bayangan" elemennya dulu di memori JavaScript.

// Bikin tag <li> baru
const buahBaru = document.createElement('li');

// Kasih isi teksnya
buahBaru.innerText = "Mangga";

// Kasih class kalau perlu
buahBaru.classList.add('item-buah');

2. Menaruh Elemen ke Halaman (appendChild & prepend)

Setelah elemennya dibuat, dia belum muncul di website. Kita harus kasih tahu dia mau "nempel" di mana.

• appendChild: Naruh di urutan paling bawah/akhir.
• prepend: Naruh di urutan paling atas/awal.

const daftar = document.getElementById('daftar-buah');
const tombolTambah = document.getElementById('btn-tambah');

tombolTambah.addEventListener('click', () => {
    daftar.appendChild(buahBaru); // Mangga muncul di bawah Apel
});

3. Menghapus Elemen (remove)

Ini cara paling gampang buat ngilangin elemen dari muka bumi (website).

const tombolHapus = document.getElementById('btn-hapus');

tombolHapus.addEventListener('click', () => {
    const apel = document.querySelector('li'); // Ambil li pertama
    if (apel) {
        apel.remove(); // Apel hilang!
    }
});

4. Cara Singkat: innerHTML (Bonus)

Kalau kamu mau nambahin banyak elemen sekaligus dengan cepat, kamu bisa pakai innerHTML. Tapi hati-hati, cara ini bakal menimpa isi yang sudah ada kalau kamu gak pakai operator +=.

// Nambahin list baru tanpa createElement
// daftar.innerHTML += "<li>Jeruk</li>";

💡 Tips Tambahan

• createElement vs innerHTML: Gunakan createElement kalau kamu mau nambahin satu elemen dan mau ngasih event listener ke elemen itu nanti. Pakai innerHTML kalau cuma mau nambahin teks/tag statis dalam jumlah banyak.
• Fragment: Kalau mau nambahin 100 elemen sekaligus, jangan di-appendChild satu-satu (bikin website lambat). Masukin dulu ke document.createDocumentFragment(), baru tempel sekali jalan ke HTML.

❗ Troubleshooting

Masalah: Kenapa elemen baru saya gak muncul di layar? Solusi: Kamu mungkin sudah createElement, tapi lupa melakukan appendChild atau prepend. Ingat, elemen baru itu masih "melayang" di memori JS sampai kamu tempel ke salah satu parent di HTML.

🎯 Kesimpulan

Sekarang kamu sudah bisa mengontrol populasi elemen di website kamu. Bisa bikin (Create) dan bisa hapus (Delete). Dengan ini, kamu sudah punya semua modal untuk bikin aplikasi interaktif yang sesungguhnya!