Manipulasi Elemen DOM di JavaScript (Create, Append, Remove)

Dalam JavaScript, manipulasi DOM (Document Object Model) berarti mengubah struktur halaman web secara langsung lewat kode. Karena itu dalam tutorial kali ini kita akan membahas tentang Manipulasi Elemen DOM di JavaScript (Create, Append, Remove).

Kamu bisa:

• Menambah elemen baru,

• Menghapus elemen tertentu, atau

• Memindahkan elemen ke posisi lain.

Dengan manipulasi DOM, kamu bisa membuat halaman yang dinamis, interaktif, dan tidak perlu reload.

1. Menambahkan Elemen Baru ke Halaman (Create & Append)

JavaScript menyediakan metode document.createElement() untuk membuat elemen baru, dan appendChild() atau append() untuk menambahkannya ke halaman.

Contoh: Menambah Paragraf Baru

<div id="kontainer">
  <h2>Daftar Pesan</h2>
</div>

<button id="tambah">Tambah Pesan</button>

<script>
let tombol = document.getElementById("tambah");
let kontainer = document.getElementById("kontainer");

tombol.addEventListener("click", function() {
  // Buat elemen baru
  let p = document.createElement("p");
  p.innerText = "Pesan baru ditambahkan!";
  
  // Tambahkan ke kontainer
  kontainer.appendChild(p);
});
</script>

Penjelasan:

• document.createElement("p") → membuat elemen <p> baru.

• innerText → menambahkan teks ke elemen tersebut.

• appendChild() → menambahkannya ke dalam <div id="kontainer">.

Hasil:
Setiap klik tombol akan menambah paragraf baru di bawah judul.

Versi Modern: Menggunakan append()

Selain appendChild(), kamu bisa pakai append() yang lebih fleksibel — bisa menambahkan teks dan elemen sekaligus.

let itemBaru = document.createElement("li");
itemBaru.innerText = "Produk Baru";
document.querySelector("ul").append(itemBaru);

Atau

document.querySelector("ul").append("Tambahan teks langsung!");

2. Menambahkan Elemen dengan Atribut dan Gaya

Kamu juga bisa menambahkan atribut (setAttribute) dan gaya CSS (style) langsung dari JavaScript.

<div id="list"></div>
<button id="buatBtn">Buat Elemen</button>

<script>
let btn = document.getElementById("buatBtn");
let list = document.getElementById("list");

btn.addEventListener("click", function() {
  let box = document.createElement("div");
  box.innerText = "Kotak baru dibuat!";
  box.setAttribute("class", "kotak");
  box.style.background = "lightblue";
  box.style.margin = "10px";
  box.style.padding = "8px";
  list.appendChild(box);
});
</script>

Hasil: setiap kali tombol diklik, sebuah kotak biru muncul dengan teks di dalamnya. Cara ini sangat berguna untuk membuat elemen kartu produk, notifikasi, atau daftar dinamis.

3. Menghapus Elemen dari DOM (Remove)

Untuk menghapus elemen, JavaScript menyediakan dua metode utama:

• removeChild() → menghapus elemen dari induknya

• remove() → menghapus elemen itu sendiri (metode modern)

Contoh: Hapus Elemen Saat Diklik

<ul id="daftar">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<button id="hapusBtn">Hapus Item Terakhir</button>

<script>
let daftar = document.getElementById("daftar");
let hapusBtn = document.getElementById("hapusBtn");

hapusBtn.addEventListener("click", function() {
  let anakTerakhir = daftar.lastElementChild;
  if (anakTerakhir) {
    daftar.removeChild(anakTerakhir);
  } else {
    alert("Semua item sudah dihapus!");
  }
});
</script>

Penjelasan:

• lastElementChild mengambil elemen terakhir dalam <ul>.

• removeChild() menghapusnya dari daftar.

• Cek kondisi agar tidak error saat elemen sudah habis.

Versi Modern: element.remove()

Kamu juga bisa menghapus elemen langsung tanpa menyebut induknya.

<p id="pesan">Klik untuk menghapus saya!</p>

<script>
let pesan = document.getElementById("pesan");

pesan.addEventListener("click", function() {
  pesan.remove();
});
</script>

Hasil: Saat teks diklik, elemen <p> langsung hilang dari halaman.

4. Studi Kasus: Tambah & Hapus Daftar Tugas

<h2>Daftar Tugas</h2>
<input type="text" id="inputTugas" placeholder="Tulis tugas...">
<button id="tambahTugas">Tambah</button>
<ul id="daftarTugas"></ul>

<script>
let input = document.getElementById("inputTugas");
let tombol = document.getElementById("tambahTugas");
let daftar = document.getElementById("daftarTugas");

tombol.addEventListener("click", function() {
  if (input.value.trim() === "") return alert("Tugas tidak boleh kosong!");

  let item = document.createElement("li");
  item.innerText = input.value;
  
  // Tambahkan tombol hapus
  let hapus = document.createElement("button");
  hapus.innerText = "Hapus";
  hapus.style.marginLeft = "10px";
  
  // Hapus item saat tombol ditekan
  hapus.addEventListener("click", function() {
    item.remove();
  });
  
  item.appendChild(hapus);
  daftar.appendChild(item);
  input.value = "";
});
</script>

Fitur yang terjadi:

• Tambah item baru ke daftar.

• Tiap item memiliki tombol “Hapus”.

• Klik “Hapus” → elemen langsung dihapus dari DOM.

Ini adalah contoh interaksi real-world dari manipulasi DOM yang sering dipakai dalam aplikasi to-do list atau keranjang belanja.

Manipulasi elemen DOM adalah dasar penting untuk membangun web dinamis. Dengan memahami:

• createElement() → membuat elemen baru,

• append() / appendChild() → menambahkannya ke halaman,

• remove() → menghapus elemen yang tidak dibutuhkan,

Kamu bisa membuat web yang berubah secara real-time sesuai interaksi pengguna.