Masukkan Password

46 Membuat Elemen DOM Secara Dinamis

Akhlis 05 September 2026

15 Min Read

Lecture ini sangat penting, karena di sini kamu mulai masuk ke tahap yang lebih “powerful” dalam DOM manipulation: bukan hanya mengubah HTML yang sudah ada, tetapi membuat elemen HTML baru dari JavaScript, memasukkannya ke DOM, lalu menghapusnya lagi ketika sudah tidak diperlukan.

Kalau lecture sebelumnya membahas:

“Bagaimana JavaScript membaca dan mengubah elemen yang sudah ada?”

Maka lecture ini membahas:

“Bagaimana JavaScript membuat elemen HTML baru dari nol?”

1. Gambaran besar lecture

Sebelumnya kita punya modal untuk Calculate EMI.

Modal tersebut sudah ditulis di HTML:

<div class="modal-overlay hide">
    ...
</div>

Kemudian JavaScript hanya mengatur:

modalDiv.classList.remove("hide");

untuk menampilkan modal, dan:

modalDiv.classList.add("hide");

untuk menyembunyikannya.

Jadi sebenarnya modalnya sudah ada di DOM.

JavaScript hanya:

HTML
 ↓
Modal sudah ada
 ↓
JavaScript menambahkan/menghapus class
 ↓
Modal tampil/sembunyi

Untuk Apply for Loan, instructor ingin:

Modal tidak perlu sudah ada di HTML.

JavaScript akan membuat:

div
 └── div
      ├── div
      │    └── h2
      │
      ├── div
      │    ├── h3
      │    └── p
      │
      └── div
           └── button

Kemudian memasukkannya ke DOM.

Jadi:

User klik Apply for Loan
          ↓
   JavaScript berjalan
          ↓
  Buat elemen HTML
          ↓
  Atur class/style/text
          ↓
  Masukkan ke DOM
          ↓
      Modal muncul
          ↓
  User klik OK
          ↓
  Modal di-remove dari DOM

Ini adalah inti lecture ini.

2. Apa maksudnya “create DOM elements dynamically”?

“Dynamically” berarti:

Elemen HTML dibuat ketika JavaScript sedang berjalan, bukan ditulis terlebih dahulu di file HTML.

Misalnya HTML biasa:

<h2>Hello World</h2>

Elemen tersebut dibuat oleh HTML parser ketika browser membaca file HTML.

Sedangkan JavaScript bisa melakukan:

let heading = document.createElement("h2");

Sekarang JavaScript baru saja membuat sebuah:

<h2></h2>

secara programmatically.

Kemudian:

heading.textContent = "Hello World";

menjadi secara konsep:

<h2>Hello World</h2>

Tapi hati-hati:

Membuat element belum berarti element tersebut sudah masuk DOM.

Ini konsep yang sangat penting.

3. `document.createElement()`

Method utama yang dipelajari adalah:

document.createElement()

Contoh:

let div = document.createElement("div");

Artinya:

“Browser, tolong buatkan sebuah element <div>.”

Kalau:

let h2 = document.createElement("h2");

berarti:

“Buat sebuah <h2>.”

Kalau:

let button = document.createElement("button");

berarti:

“Buat sebuah <button>.”

Bentuk umumnya

document.createElement("nama-element");

Contoh:

document.createElement("div");
document.createElement("h2");
document.createElement("p");
document.createElement("button");

4. Analogi sederhana: Lego 🧱

Bayangkan kamu punya Lego.

createElement("div")
        ↓
    ambil 1 balok

Kemudian:

div.classList.add("modal-overlay");

Kamu memberi atribut/karakteristik pada balok tersebut.

Kemudian:

wrapper.appendChild(div);

Kamu memasangkan balok itu ke struktur Lego.

Jadi prosesnya:

CREATE
  ↓
MODIFY
  ↓
INSERT

Ini pola yang sangat penting dalam DOM manipulation.

5. Langkah pertama: membuat `overlay`

Instructor membuat function:

function showMessage(name) {
    ...
}

Nama function sebenarnya bebas.

Tujuan function:

Membuat seluruh modal secara dynamically.

Pertama:

let overlayDiv = document.createElement("div");

Sekarang kita mempunyai object DOM berupa <div>.

Tapi belum masuk DOM.

Kemudian:

overlayDiv.classList.add("modal-overlay");

Sekarang element tersebut memiliki class:

<div class="modal-overlay"></div>

6. Kenapa menggunakan `classList.add()`?

Karena CSS sudah dibuat sebelumnya.

Misalnya:

.modal-overlay {
    ...
}

Jadi JavaScript tidak perlu membuat ulang semua CSS.

JavaScript cukup berkata:

overlayDiv.classList.add("modal-overlay");

Maka CSS:

.modal-overlay

akan berlaku pada element tersebut.

Ini sama seperti yang sudah kamu pelajari sebelumnya.

JavaScript:

element.classList.add("nama-class");

CSS:

.nama-class {
    ...
}

Kemudian dibuat lagi:

let modalWrapper = document.createElement("div");

Kemudian:

modalWrapper.classList.add("modal-wrapper");

Sekarang secara konsep kita punya:

overlayDiv
    └── modalWrapper

Tetapi belum benar-benar terhubung.

Saat ini keduanya masih seperti dua benda terpisah.

Modal tersebut memiliki:

modal-wrapper
│
├── modal-header
├── modal-content
└── modal-footer

Maka JavaScript membuat tiga <div>.

Contohnya:

let modalHeader = document.createElement("div");
modalHeader.classList.add("modal-header");

Kemudian:

let modalContent = document.createElement("div");
modalContent.classList.add("modal-content");

Kemudian:

let modalFooter = document.createElement("div");
modalFooter.classList.add("modal-footer");

Sekarang kita sudah punya:

modalHeader
modalContent
modalFooter

9. Membuat `<h2>`

Di dalam modal-header, kita membutuhkan:

<h2>Loan Request Submitted</h2>

Pertama:

let headerTwo = document.createElement("h2");

Sekarang baru ada:

<h2></h2>

Belum ada tulisan.

Tambahkan text

Bisa menggunakan:

headerTwo.textContent = "Loan Request Submitted";

Sekarang:

<h2>Loan Request Submitted</h2>

10. Masukkan `<h2>` ke header

Sekarang kita punya:

modalHeader

dan:

headerTwo

Kita ingin:

modalHeader
    └── h2

Gunakan:

modalHeader.appendChild(headerTwo);

Artinya:

Masukkan headerTwo sebagai child dari modalHeader.

Sekarang hubungan parent-child terbentuk.

Secara HTML:

<div class="modal-header">
    <h2>Loan Request Submitted</h2>
</div>

11. Apa sebenarnya `appendChild()`?

Ini salah satu konsep paling penting di lecture ini.

Misalnya:

parent.appendChild(child);

Artinya:

Masukkan child ke dalam parent.

Contoh:

modalHeader.appendChild(headerTwo);

Visualnya:

Before:

modalHeader

headerTwo


After:

modalHeader
    └── headerTwo

Atau:

<div class="modal-header">
    <h2>...</h2>
</div>

12. “Child” itu maksudnya apa?

Dalam DOM, kita sering bicara:

parent
 └── child

Contoh HTML:

<div>
    <h2>Hello</h2>
</div>

Maka:

div
└── h2

div adalah parent.

h2 adalah child.

Kalau:

<div>
    <h2>Hello</h2>
    <p>Welcome</p>
</div>

maka:

div
├── h2
└── p

Jadi:

div.appendChild(h2);
div.appendChild(p);

13. Membuat button

Di footer kita membutuhkan:

<button class="close-modal-button">
    OK
</button>

JavaScript:

let closeButton = document.createElement("button");

Kemudian class:

closeButton.classList.add("close-modal-button");

Kemudian text:

closeButton.textContent = "OK";

Sekarang secara konsep:

<button class="close-modal-button">OK</button>

Kita bisa menggunakan:

modalFooter.appendChild(closeButton);

Maka:

modalFooter
    └── button

atau:

<div class="modal-footer">
    <button class="close-modal-button">OK</button>
</div>

15. Membuat `<h3>`

Di bagian content terdapat:

<h3>Hello John</h3>

Kita buat:

let headingThree = document.createElement("h3");

Sekarang:

<h3></h3>

16. `document.createTextNode()`

Di bagian ini instructor memperkenalkan method baru:

document.createTextNode()

Contoh:

let textNode = document.createTextNode("Hello John");

Ini membuat text node.

Hasilnya adalah text:

Hello John

Bukan <h3>.

Ini perbedaan penting:

document.createElement("h3");

→ membuat element.

Sedangkan:

document.createTextNode("Hello John");

→ membuat text node.

17. Element vs Text Node

Bayangkan:

<h3>Hello John</h3>

Struktur sederhananya:

h3
└── "Hello John"

Jadi:

<h3>         ← Element Node
    │
    └── Hello John  ← Text Node
</h3>

Ketika kita melakukan:

let headingThree = document.createElement("h3");

kita membuat:

<h3>

Kemudian:

let textNode = document.createTextNode("Hello John");

kita membuat:

"Hello John"

Kemudian:

headingThree.appendChild(textNode);

hasilnya:

h3
└── Hello John

atau:

<h3>Hello John</h3>

18. `textContent` vs `createTextNode()`

Kamu mungkin bertanya:

“Kenapa tidak langsung pakai textContent?”

Bisa.

Misalnya:

headingThree.textContent = "Hello John";

Itu lebih sederhana.

Instructor sengaja memperkenalkan:

document.createTextNode()

supaya kamu tahu bahwa text sendiri juga merupakan node dalam DOM.

Untuk sekarang, secara praktis:

element.textContent = "Hello";

biasanya lebih simpel.

19. Memasukkan `<h3>` ke modal content

Setelah:

headingThree.appendChild(textNode);

kita punya:

headingThree
└── Hello John

Kemudian:

modalContent.appendChild(headingThree);

sehingga:

modalContent
    └── h3
         └── Hello John

20. Membuat paragraph `<p>`

Kemudian:

let p = document.createElement("p");

Sekarang:

<p></p>

Tambahkan text:

p.textContent =
    "We have received your loan request and we will contact you through your provided contact.";

Sekarang:

<p>
    We have received your loan request...
</p>

21. Menambahkan style secara langsung

Instructor juga menunjukkan:

p.style.marginTop = "30px";

Ini berarti JavaScript memberikan inline style:

<p style="margin-top: 30px;">

Ingat aturan camelCase:

CSS:

margin-top

JavaScript:

marginTop

Begitu juga:

background-color

menjadi:

backgroundColor

modalContent.appendChild(p);

Sekarang:

modalContent
├── h3
│   └── Hello John
│
└── p
    └── We have received...

23. Sekarang struktur mulai terbentuk

Kita sudah mempunyai:

modalHeader
└── h2

modalContent
├── h3
└── p

modalFooter
└── button

Sekarang ketiga bagian tersebut harus dimasukkan ke:

modalWrapper

24. Masukkan header, content, footer ke wrapper

modalWrapper.appendChild(modalHeader);
modalWrapper.appendChild(modalContent);
modalWrapper.appendChild(modalFooter);

Sekarang:

modalWrapper
│
├── modalHeader
│   └── h2
│
├── modalContent
│   ├── h3
│   └── p
│
└── modalFooter
    └── button

Ini sudah hampir menjadi modal utuh.

25. Masukkan wrapper ke overlay

Sekarang kita punya:

overlayDiv
modalWrapper

Kita ingin:

overlayDiv
└── modalWrapper

Maka:

overlayDiv.appendChild(modalWrapper);

Sekarang:

overlayDiv
└── modalWrapper
    ├── modalHeader
    │   └── h2
    │
    ├── modalContent
    │   ├── h3
    │   └── p
    │
    └── modalFooter
        └── button

Modalnya sudah lengkap.

Tapi masih ada satu masalah besar.

26. Element sudah dibuat, tetapi belum masuk DOM

Ini adalah bagian yang sangat penting.

Misalnya:

let overlayDiv = document.createElement("div");

Element sudah dibuat.

Tetapi kalau kita tidak melakukan:

someParent.appendChild(overlayDiv);

element tersebut belum muncul di halaman.

Analogi:

Kamu sudah membuat kursi, tetapi kursinya masih ada di gudang. Belum dimasukkan ke ruangan.

Jadi:

createElement()
      ↓
element dibuat
      ↓
belum terlihat di halaman

Harus:

append/insert
      ↓
element masuk DOM
      ↓
browser menampilkannya

27. Inilah bug yang terjadi di lecture

Instructor awalnya menjalankan:

showMessage();

Tetapi tidak ada modal yang muncul.

Kemudian ternyata masalahnya adalah:

overlayDiv sudah dibuat, tetapi belum dimasukkan ke DOM.

Ini bug yang sangat bagus untuk dipahami.

Kita punya:

overlayDiv
└── modalWrapper
    ├── header
    ├── content
    └── footer

Semua sudah dibuat.

Tetapi struktur tersebut masih “di luar DOM”.

28. Cari container di HTML

Instructor kemudian mencari:

<div class="main-content-area">

Kemudian:

let mainContentArea =
    document.querySelector(".main-content-area");

Sekarang JavaScript memiliki referensi ke element yang memang sudah ada di DOM.

Lalu:

mainContentArea.insertAdjacentElement(
    "beforeend",
    overlayDiv
);

Artinya:

Masukkan overlayDiv ke dalam mainContentArea, tepat sebelum tag penutupnya.

29. Apa itu `insertAdjacentElement()`?

Syntax:

element.insertAdjacentElement(position, newElement);

Ada beberapa posisi.

Yang dipakai di lecture:

"beforeend"

Artinya:

Masukkan element sebagai child terakhir.

Misalnya:

<div class="main-content-area">
    <p>Existing content</p>
</div>

Kemudian:

mainContentArea.insertAdjacentElement(
    "beforeend",
    overlayDiv
);

hasilnya secara konsep:

<div class="main-content-area">
    <p>Existing content</p>

    <div class="modal-overlay">
        ...
    </div>
</div>

30. Jangan tertukar: `insertAdjacentElement` vs `insertAdjacentHTML`

Ini sangat penting.

`insertAdjacentElement()`

Untuk memasukkan DOM element.

parent.insertAdjacentElement(
    "beforeend",
    element
);

Contoh:

let div = document.createElement("div");

parent.insertAdjacentElement(
    "beforeend",
    div
);

`insertAdjacentHTML()`

Untuk memasukkan string HTML.

Misalnya:

parent.insertAdjacentHTML(
    "beforeend",
    "<div>Hello</div>"
);

Yang kita masukkan adalah:

HTML STRING

bukan object element yang sudah dibuat.

Perbandingan

Method	Yang dimasukkan
`appendChild()`	DOM node/element
`insertAdjacentElement()`	DOM element
`insertAdjacentHTML()`	HTML string

Ini perbedaan yang perlu kamu hafalkan.

31. Empat posisi `insertAdjacent...`

Untuk insertAdjacentElement() dan insertAdjacentHTML(), ada beberapa posisi:

beforebegin
afterbegin
beforeend
afterend

Visual:

<div id="parent">

    existing content

</div>

`beforebegin`

SEBELUM <div>

`afterbegin`

<div>
    DI SINI
    existing content
</div>

`beforeend`

<div>
    existing content
    DI SINI
</div>

`afterend`

SETELAH </div>

Untuk lecture ini digunakan:

"beforeend"

agar modal masuk ke dalam container.

32. Bagian yang sangat penting: `remove()`

Sekarang modal sudah muncul.

Bagaimana menghilangkannya?

Berbeda dengan modal EMI.

Modal EMI:

classList.add("hide");

Artinya:

Element masih ada di DOM, hanya disembunyikan.

Modal Apply for Loan:

overlayDiv.remove();

Artinya:

Element benar-benar dihapus dari DOM.

33. `remove()` bekerja bagaimana?

Misalnya:

main-content-area
│
├── content
│
└── overlayDiv
    └── modalWrapper
        ├── header
        ├── content
        └── footer

Kemudian:

overlayDiv.remove();

Maka:

main-content-area
│
└── content

Seluruh subtree modal ikut hilang.

Karena:

overlayDiv
└── modalWrapper
    ├── header
    ├── content
    └── footer

semuanya berada di bawah overlayDiv.

Jadi cukup menghapus parent terluar.

34. Kenapa cukup `overlayDiv.remove()`?

Karena:

overlayDiv
    ↓
modalWrapper
    ↓
header/content/footer
    ↓
h2/h3/p/button

Kalau parent terluarnya dihapus dari DOM, seluruh struktur yang ada di bawahnya tidak lagi menjadi bagian dari DOM document.

Ini seperti menghapus folder:

📁 modal
   ├── header
   ├── content
   └── footer

Daripada menghapus file satu-satu, cukup hapus foldernya.

35. Menambahkan event pada tombol OK

Ketika membuat button:

let closeButton = document.createElement("button");

Instructor kemudian memasang:

closeButton.onclick = function () {
    overlayDiv.remove();
};

Artinya:

User klik OK
      ↓
onclick berjalan
      ↓
overlayDiv.remove()
      ↓
Modal dihapus dari DOM

36. Ini menggabungkan beberapa materi sebelumnya

Lecture ini sebenarnya merupakan gabungan banyak konsep yang sudah kamu pelajari.

Function

function showMessage(name) {
    ...
}

DOM selection

document.querySelector(...)

DOM creation

document.createElement(...)

CSS class

element.classList.add(...)

Style

element.style.marginTop = "30px";

Text

element.textContent = ...

Text node

document.createTextNode(...)

Event

button.onclick = function () {
    ...
};

DOM insertion

appendChild(...)

dan:

insertAdjacentElement(...)

DOM removal

element.remove()

Jadi lecture ini sebenarnya menggabungkan banyak materi sebelumnya menjadi satu aplikasi nyata.

37. Bagian menarik: nama user tidak lagi hardcoded

Awalnya instructor membuat:

let textNode =
    document.createTextNode("Hello John");

Masalahnya:

Semua orang akan melihat “Hello John”.

Padahal user bisa memasukkan:

Budi

atau:

Manoj

atau:

Andi

Maka function dibuat menerima parameter:

function showMessage(name) {
    ...
}

Kemudian saat dipanggil:

showMessage(fName);

Misalnya:

fName = "Manoj";

Maka:

showMessage("Manoj");

38. Kemudian text dibuat menggunakan parameter

Misalnya:

let textNode =
    document.createTextNode("Hello " + name);

Kalau:

name = "Manoj";

hasilnya:

Hello Manoj

Kalau:

name = "Budi";

hasilnya:

Hello Budi

Ini menunjukkan kekuatan function + DOM manipulation.

39. Hubungan dengan lecture sebelumnya

Di lecture sebelumnya kamu belajar mengambil:

let fName =
    document.getElementById("fName").value;

Misalnya user memasukkan:

Manoj

Maka:

fName

berisi:

"Manoj"

Kemudian:

showMessage(fName);

menjadi:

showMessage("Manoj");

Lalu function membuat:

<h3>Hello Manoj</h3>

secara dynamic.

Jadi sekarang alurnya:

HTML FORM
   ↓
.value
   ↓
JavaScript variable
   ↓
function parameter
   ↓
createElement()
   ↓
createTextNode()/textContent
   ↓
appendChild()
   ↓
DOM
   ↓
Modal tampil

Ini hubungan yang sangat penting dengan lecture sebelumnya.

Ini mungkin poin terpenting dari seluruh lecture.

Modal sudah dibuat di HTML:

<div class="modal-overlay hide">
    ...
</div>

JavaScript:

classList.remove("hide");

untuk show.

Dan:

classList.add("hide");

untuk hide.

Jadi:

DOM
 │
 └── Modal sudah ada
       │
       ├── hide → tidak terlihat
       │
       └── remove hide → terlihat

Modal belum ada.

JavaScript:

document.createElement(...)

untuk membuatnya.

Kemudian:

appendChild(...)

atau:

insertAdjacentElement(...)

untuk memasukkannya ke DOM.

Dan:

remove()

untuk menghapusnya.

Jadi:

Tidak ada modal
      ↓
createElement()
      ↓
Buat modal
      ↓
insert ke DOM
      ↓
Modal terlihat
      ↓
remove()
      ↓
Modal hilang dari DOM

Bayangkan sebuah ruangan.

Kursinya sudah ada di ruangan, tetapi ditutup dengan kain.

Kursi sudah ada
      ↓
tutup kain
      ↓
hide

Untuk melihatnya:

lepaskan kain
      ↓
remove hide

Untuk menyembunyikannya:

pasang kain lagi
      ↓
add hide

Kursinya tidak ada sama sekali.

Ketika diperlukan:

buat kursi
   ↓
masukkan ke ruangan

Ketika selesai:

angkat kursi
   ↓
remove

Itulah perbedaan:

HIDE
vs
REMOVE FROM DOM

42. `hide` vs `remove()` — jangan tertukar

`classList.add("hide")`	`remove()`
Element tetap ada	Element dihapus dari DOM
Hanya disembunyikan	Benar-benar dikeluarkan
Bisa ditampilkan lagi	Harus dibuat/ditambahkan lagi jika diperlukan
Cocok untuk UI yang sering toggle	Cocok untuk element temporary
DOM element masih ada	Element tidak lagi ada di document

Contoh:

modal.classList.add("hide");

≠

modal.remove();

43. Urutan membuat element secara dynamic

Coba hafalkan pola ini:

1. CREATE
2. CONFIGURE
3. ADD CONTENT
4. INSERT

Contoh:

1. CREATE

let button = document.createElement("button");

2. CONFIGURE

button.classList.add("close-modal-button");

3. ADD CONTENT

button.textContent = "OK";

4. INSERT

footer.appendChild(button);

44. Pola lengkap untuk membuat element

Secara umum:

let element = document.createElement("tag");

Kemudian:

element.classList.add("some-class");

atau:

element.style.someProperty = "value";

Kemudian:

element.textContent = "Some text";

Kemudian:

parent.appendChild(element);

Contoh sederhana:

let p = document.createElement("p");

p.classList.add("message");

p.textContent = "Hello World";

document.body.appendChild(p);

Hasilnya akan menjadi:

<body>
    ...
    <p class="message">Hello World</p>
</body>

45. `appendChild()` vs `insertAdjacentElement()`

Keduanya bisa digunakan untuk memasukkan element.

`appendChild()`

parent.appendChild(child);

Sederhana:

“Masukkan child ke dalam parent.”

`insertAdjacentElement()`

parent.insertAdjacentElement(
    "beforeend",
    child
);

Lebih spesifik karena kamu bisa menentukan posisi.

Mental model

appendChild()
    ↓
"masukkan sebagai child"

insertAdjacentElement()
    ↓
"masukkan element di posisi tertentu"

46. Ada satu detail teknis penting

Caption lecture menyebut:

“append child or insert adjacent HTML”

Tetapi dalam konteks yang sedang dibahas, ketika memasukkan overlayDiv, yang benar adalah:

insertAdjacentElement()

bukan:

insertAdjacentHTML()

Karena:

overlayDiv

adalah DOM element object.

Sedangkan insertAdjacentHTML() menerima string HTML.

Contoh:

Element

let div = document.createElement("div");

parent.insertAdjacentElement(
    "beforeend",
    div
);

HTML string

parent.insertAdjacentHTML(
    "beforeend",
    "<div>Hello</div>"
);

Jadi jangan tertukar.

47. `appendChild()` sebenarnya menerima Node

Secara teknis, appendChild() bukan hanya untuk element.

Contohnya:

let text = document.createTextNode("Hello");

heading.appendChild(text);

Text node juga merupakan node.

Makanya bisa:

heading.appendChild(textNode);

48. Struktur DOM final

Kalau kita sederhanakan hasil akhir lecture:

main-content-area
│
├── existing content
│
└── modal-overlay
    │
    └── modal-wrapper
        │
        ├── modal-header
        │   └── h2
        │       └── "Loan Request Submitted"
        │
        ├── modal-content
        │   ├── h3
        │   │   └── "Hello Manoj"
        │   │
        │   └── p
        │       └── "We have received..."
        │
        └── modal-footer
            └── button
                └── "OK"

Inilah yang JavaScript bangun dari nol.

49. Alur lengkap dari awal sampai akhir

Mari kita lihat semuanya dalam satu flow.

User mengisi form
        ↓
First Name = "Manoj"
        ↓
Klik Apply for Loan
        ↓
applyForLoan(event)
        ↓
event.preventDefault()
        ↓
ambil fName dari .value
        ↓
showMessage(fName)
        ↓
createElement("div")
        ↓
buat overlay
        ↓
buat wrapper
        ↓
buat header
        ↓
buat h2
        ↓
buat content
        ↓
buat h3 + p
        ↓
buat footer
        ↓
buat button
        ↓
atur class/style/text
        ↓
appendChild()
        ↓
bangun struktur modal
        ↓
insertAdjacentElement()
        ↓
modal masuk DOM
        ↓
modal tampil
        ↓
User klik OK
        ↓
overlayDiv.remove()
        ↓
seluruh modal hilang dari DOM

50. Kenapa ini powerful?

Karena sekarang JavaScript bisa membuat UI berdasarkan kondisi.

Misalnya nanti:

if (loginBerhasil) {
    // buat success message
}

atau:

if (error) {
    // buat error message
}

atau:

if (cart.length > 0) {
    // buat cart item
}

Jadi HTML tidak harus berisi semua kemungkinan element sejak awal.

JavaScript bisa membuatnya ketika dibutuhkan.

51. Contoh sederhana di luar lecture

Misalnya kita ingin membuat pesan:

Welcome, Budi!

dengan JavaScript.

let message = document.createElement("h2");

message.textContent = "Welcome, Budi!";

document.body.appendChild(message);

Prosesnya:

createElement("h2")
        ↓
<h2></h2>
        ↓
textContent
        ↓
<h2>Welcome, Budi!</h2>
        ↓
appendChild()
        ↓
masuk DOM
        ↓
muncul di browser

52. Contoh membuat button dynamic

let button = document.createElement("button");

button.textContent = "Click Me";

button.classList.add("my-button");

button.addEventListener("click", function () {
    alert("Button clicked!");
});

document.body.appendChild(button);

Perhatikan betapa banyak materi sebelumnya sekarang terhubung:

createElement
    +
textContent
    +
classList
    +
addEventListener
    +
appendChild

Ini alasan lecture ini penting.

53. Satu konsep yang sering membuat beginner bingung

Perhatikan:

let div = document.createElement("div");

Apakah browser langsung menampilkan <div>?

Tidak.

Karena:

createElement()

hanya membuat object element.

Belum memasukkannya ke document.

Harus ada:

document.body.appendChild(div);

atau:

someContainer.appendChild(div);

atau:

someContainer.insertAdjacentElement("beforeend", div);

Baru element menjadi bagian dari DOM.

54. Jadi ada dua dunia

Ini mental model yang bagus:

        JAVASCRIPT MEMORY
              │
              │ createElement()
              ↓
        DOM ELEMENT OBJECT
              │
              │ append/insert
              ↓
           DOCUMENT
              │
              ↓
         BROWSER UI

Jadi:

document.createElement("div");

belum cukup.

Harus:

parent.appendChild(div);

55. Cheat sheet lecture

Membuat element

document.createElement("div");

Membuat text node

document.createTextNode("Hello");

Mengatur text

element.textContent = "Hello";

Menambah class

element.classList.add("box");

Menghapus class

element.classList.remove("box");

Mengatur style

element.style.marginTop = "30px";

Memasukkan child

parent.appendChild(child);

Memasukkan element pada posisi tertentu

parent.insertAdjacentElement(
    "beforeend",
    element
);

Memasukkan HTML string

parent.insertAdjacentHTML(
    "beforeend",
    "<p>Hello</p>"
);

Menghapus element dari DOM

element.remove();

56. Ringkasan perbedaan method

Method	Fungsi
`createElement()`	Membuat element baru
`createTextNode()`	Membuat text node
`appendChild()`	Memasukkan node sebagai child
`insertAdjacentElement()`	Memasukkan element pada posisi tertentu
`insertAdjacentHTML()`	Memasukkan HTML string
`remove()`	Menghapus element dari DOM
`classList.add()`	Menambahkan class
`classList.remove()`	Menghapus class
`textContent`	Membaca/menulis text
`style`	Mengubah inline CSS

57. Yang paling wajib kamu pahami

Kalau dari lecture panjang ini hanya boleh mengambil 7 konsep, pahami ini:

1. `createElement()`

let div = document.createElement("div");

Membuat element.

2. Membuat ≠ memasukkan ke DOM

let div = document.createElement("div");

belum membuatnya muncul.

Harus:

parent.appendChild(div);

3. `appendChild()`

parent.appendChild(child);

Masukkan child ke parent.

4. `insertAdjacentElement()`

parent.insertAdjacentElement(
    "beforeend",
    element
);

Masukkan DOM element pada posisi tertentu.

5. `remove()`

element.remove();

Hapus element dari DOM.

6. `textContent` dan `createTextNode()`

element.textContent = "Hello";

atau:

let text = document.createTextNode("Hello");
element.appendChild(text);

7. Dynamic DOM = CREATE → CONFIGURE → INSERT

Ini mental model paling penting:

CREATE
   ↓
createElement()
   ↓
CONFIGURE
   ↓
classList / style / textContent
   ↓
INSERT
   ↓
appendChild() / insertAdjacentElement()
   ↓
DOM

Kalau ingin menghilangkan:

DOM
 ↓
remove()
 ↓
Element keluar dari DOM

58. Hubungkan dengan semua lecture sebelumnya

Sekarang perjalanan belajarmu mulai terlihat:

VARIABLE
   ↓
DATA TYPE
   ↓
OPERATOR
   ↓
CONDITION
   ↓
FUNCTION
   ↓
ARRAY
   ↓
LOOP
   ↓
DOM
   ↓
EVENT
   ↓
FORM
   ↓
READ USER INPUT
   ↓
CREATE DOM ELEMENT
   ↓
INSERT INTO DOM
   ↓
REMOVE FROM DOM

Dan aplikasi Apply for Loan yang sedang dibuat instructor sebenarnya adalah tempat semua konsep itu mulai bertemu.

Inti lecture ini: sebelumnya kamu belajar JavaScript memanipulasi element yang sudah ada; sekarang kamu belajar JavaScript membuat element baru, menyusunnya menjadi struktur DOM, memasukkannya ke halaman, lalu menghapusnya kembali ketika selesai.

1. Gambaran besar lecture

Tetapi modal Apply for Loan berbeda

2. Apa maksudnya “create DOM elements dynamically”?

3. document.createElement()

Bentuk umumnya

4. Analogi sederhana: Lego 🧱

5. Langkah pertama: membuat overlay

6. Kenapa menggunakan classList.add()?

JavaScript:

CSS:

7. Membuat modal wrapper

8. Membuat tiga bagian modal

9. Membuat <h2>

Tambahkan text

10. Masukkan <h2> ke header

11. Apa sebenarnya appendChild()?

12. “Child” itu maksudnya apa?

13. Membuat button

14. Memasukkan button ke footer

15. Membuat <h3>

16. document.createTextNode()

17. Element vs Text Node

18. textContent vs createTextNode()

19. Memasukkan <h3> ke modal content

20. Membuat paragraph <p>

21. Menambahkan style secara langsung

22. Masukkan paragraph ke modal content

23. Sekarang struktur mulai terbentuk

24. Masukkan header, content, footer ke wrapper

25. Masukkan wrapper ke overlay

26. Element sudah dibuat, tetapi belum masuk DOM

27. Inilah bug yang terjadi di lecture

28. Cari container di HTML

29. Apa itu insertAdjacentElement()?

30. Jangan tertukar: insertAdjacentElement vs insertAdjacentHTML

insertAdjacentElement()

insertAdjacentHTML()

Perbandingan

31. Empat posisi insertAdjacent...

beforebegin

afterbegin

beforeend

afterend

32. Bagian yang sangat penting: remove()

33. remove() bekerja bagaimana?

34. Kenapa cukup overlayDiv.remove()?

35. Menambahkan event pada tombol OK

36. Ini menggabungkan beberapa materi sebelumnya

Function

DOM selection

DOM creation

CSS class

Style

Text

Text node

Event

DOM insertion

DOM removal

37. Bagian menarik: nama user tidak lagi hardcoded

38. Kemudian text dibuat menggunakan parameter

39. Hubungan dengan lecture sebelumnya

40. Perbedaan dua jenis modal yang dipelajari

Modal Calculate EMI

Modal Apply for Loan

41. Analogi dua modal

Modal EMI

Modal Apply Loan

42. hide vs remove() — jangan tertukar

43. Urutan membuat element secara dynamic

1. CREATE

2. CONFIGURE

3. ADD CONTENT

4. INSERT

44. Pola lengkap untuk membuat element

45. appendChild() vs insertAdjacentElement()

appendChild()

insertAdjacentElement()

Mental model

46. Ada satu detail teknis penting

Element

3. `document.createElement()`

5. Langkah pertama: membuat `overlay`

6. Kenapa menggunakan `classList.add()`?

9. Membuat `<h2>`

10. Masukkan `<h2>` ke header

11. Apa sebenarnya `appendChild()`?

15. Membuat `<h3>`

16. `document.createTextNode()`

18. `textContent` vs `createTextNode()`

19. Memasukkan `<h3>` ke modal content

20. Membuat paragraph `<p>`

29. Apa itu `insertAdjacentElement()`?

30. Jangan tertukar: `insertAdjacentElement` vs `insertAdjacentHTML`

`insertAdjacentElement()`

`insertAdjacentHTML()`

31. Empat posisi `insertAdjacent...`

`beforebegin`

`afterbegin`

`beforeend`

`afterend`

32. Bagian yang sangat penting: `remove()`

33. `remove()` bekerja bagaimana?

34. Kenapa cukup `overlayDiv.remove()`?

42. `hide` vs `remove()` — jangan tertukar

45. `appendChild()` vs `insertAdjacentElement()`

`appendChild()`

`insertAdjacentElement()`

47. `appendChild()` sebenarnya menerima Node

1. `createElement()`

3. `appendChild()`

4. `insertAdjacentElement()`

5. `remove()`

6. `textContent` dan `createTextNode()`