Masukkan Password

39 Render Konten Halaman Web Secara Dinamis

Akhlis 05 September 2026

13 Min Read

Lecture ini sangat penting, karena mulai menggabungkan semua konsep DOM yang sudah kamu pelajari sebelumnya menjadi sesuatu yang lebih nyata: membuat isi halaman berubah secara dinamis.

Kalau lecture sebelumnya kita belajar:

“Bagaimana cara mengambil dan mengubah element DOM?”

Sekarang kita belajar:

“Bagaimana cara menampilkan hanya bagian halaman tertentu berdasarkan kondisi?”

Contoh kasusnya adalah website memiliki 3 tab:

Home | EMI Calculator | Apply for Loan

Ketika user memilih Home, hanya Home yang ditampilkan.

Ketika memilih EMI Calculator, hanya EMI Calculator yang ditampilkan.

Ketika memilih Apply for Loan, hanya Apply for Loan yang ditampilkan.

1. Gambaran besar dulu

Bayangkan HTML awal kita seperti ini:

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

    <section class="homepage">
        ...
    </section>

    <section class="emi-calculator-page">
        ...
    </section>

    <section class="apply-loan-page">
        ...
    </section>

</div>

Artinya awalnya kita punya 3 section sekaligus.

Tapi yang kita inginkan adalah:

Klik Home
↓
tampilkan homepage saja

Klik EMI Calculator
↓
tampilkan EMI Calculator saja

Klik Apply for Loan
↓
tampilkan Apply for Loan saja

Jadi secara konsep:

                 selectedTab
                     ↓
             "homepage" ?
              ↙        ↘
            YES         NO
             ↓           ↓
       tampilkan      cek lagi
       homepage

Kalau:

selectedTab = "emi-calculator-page";

maka yang ditampilkan hanya:

EMI Calculator

2. Konsep baru: Dynamic Content Rendering

Istilah yang digunakan dalam lecture adalah:

render content dynamically

Artinya:

JavaScript menentukan konten apa yang harus ditampilkan, kemudian memasukkannya ke halaman.

Contoh sederhana:

selectedTab = "homepage"
        ↓
JavaScript
        ↓
render homepage

selectedTab = "emi-calculator-page"
        ↓
JavaScript
        ↓
render EMI Calculator

selectedTab = "apply-loan-page"
        ↓
JavaScript
        ↓
render Apply for Loan

Inilah dasar dari banyak website modern.

3. Variable `selectedTab`

Lecture membuat:

let selectedTab = "homepage";

Variable ini menyimpan:

Tab/section mana yang sedang dipilih?

Misalnya:

let selectedTab = "homepage";

berarti:

Yang dipilih = Home

Kalau:

selectedTab = "emi-calculator-page";

berarti:

Yang dipilih = EMI Calculator

Kalau:

selectedTab = "apply-loan-page";

berarti:

Yang dipilih = Apply for Loan

4. Kenapa menggunakan variable?

Karena nanti kita ingin JavaScript bisa melakukan:

if selectedTab === homepage
    → tampilkan homepage

if selectedTab === emi calculator
    → tampilkan EMI calculator

if selectedTab === loan
    → tampilkan loan

Daripada menulis logic secara acak, kita punya satu sumber informasi:

selectedTab

yang menjawab:

“Sekarang user sedang memilih bagian mana?”

5. Function `renderSelectedSection()`

Kemudian lecture membuat function:

function renderSelectedSection(selectedTab) {
    // ...
}

Nama function ini sebenarnya sudah menjelaskan tujuannya:

render
=
tampilkan/gambarkan ke halaman

selected section
=
section yang dipilih

Jadi:

renderSelectedSection()

bisa kita baca:

“Tampilkan section yang sedang dipilih.”

6. Parameter dan argument lagi

Ini juga menghubungkan dengan lecture Functions.

Kita punya:

function renderSelectedSection(selectedTab) {
}

selectedTab di sini adalah parameter.

Kemudian function dipanggil:

renderSelectedSection(selectedTab);

selectedTab yang ada di luar adalah argument.

Jadi:

Variable selectedTab
        ↓
   dikirim ke function
        ↓
Parameter selectedTab
        ↓
digunakan oleh function

Jangan bingung karena nama variable dan parameter sama.

Misalnya:

let selectedTab = "homepage";

function renderSelectedSection(selectedTab) {
    console.log(selectedTab);
}

renderSelectedSection(selectedTab);

Yang pertama:

let selectedTab

adalah variable di luar function.

Yang kedua:

function ...(selectedTab)

adalah parameter.

Yang ketiga:

renderSelectedSection(selectedTab)

mengirim nilai variable ke parameter.

7. Menggunakan `switch`

Di dalam function, lecture menggunakan:

switch (selectedTab) {
    case "homepage":
        ...
        break;

    case "emi-calculator-page":
        ...
        break;

    case "apply-loan-page":
        ...
        break;
}

Kenapa switch cocok?

Karena kita sedang bertanya:

“Nilai selectedTab sekarang apa?”

Kemungkinan jawabannya adalah salah satu dari beberapa nilai tertentu.

selectedTab
     ↓
     ?
 ┌───┼─────────────┐
 ↓   ↓             ↓
home EMI          loan

8. Ingat arti `case`

Misalnya:

switch (selectedTab) {
    case "homepage":
        ...
        break;
}

Artinya:

Kalau selectedTab === "homepage", jalankan kode ini.

Jadi case bukan nomor urutan.

Ini:

case "homepage":

berarti:

“Kalau nilainya homepage.”

9. Contoh switch lengkap

Secara sederhana:

function renderSelectedSection(selectedTab) {

    switch (selectedTab) {

        case "homepage":
            console.log("Render Home");
            break;

        case "emi-calculator-page":
            console.log("Render EMI Calculator");
            break;

        case "apply-loan-page":
            console.log("Render Apply for Loan");
            break;
    }
}

Kemudian:

renderSelectedSection("homepage");

Output:

Render Home

Kalau:

renderSelectedSection("emi-calculator-page");

output:

Render EMI Calculator

10. Sekarang masalah sebenarnya

Kita sudah tahu section mana yang ingin ditampilkan.

Tapi ada masalah:

Awalnya HTML memiliki:

Home
EMI Calculator
Apply for Loan

Semuanya ada di DOM.

Kita ingin hanya satu yang terlihat.

Lecture mencoba pendekatan:

Hapus semua isi area content terlebih dahulu, kemudian masukkan kembali section yang diperlukan.

Konsepnya:

SEMUA SECTION
     ↓
hapus semua
     ↓
pilih section
     ↓
masukkan section tersebut

11. Membuat `mainSectionArea`

Lecture kemudian membuat container khusus.

Misalnya:

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

    <!-- menu/tabs tetap di sini -->

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

        <section class="homepage">
            ...
        </section>

        <section class="emi-calculator-page">
            ...
        </section>

        <section class="apply-loan-page">
            ...
        </section>

    </div>

</div>

Kenapa dibuat main-section-area?

Karena kita tidak ingin menghapus menu/tab.

Kita hanya ingin menghapus area yang berisi section.

Jadi:

main-content-area
│
├── Menu / Tabs        ← JANGAN DIHAPUS
│
└── main-section-area  ← BOLEH DIUBAH
      │
      ├── Home
      ├── EMI
      └── Loan

Ini keputusan struktur HTML yang penting.

12. Mengambil `main-section-area`

JavaScript:

let mainSectionArea =
    document.querySelector(".main-section-area");

Sekarang:

mainSectionArea
       ↓
<div class="main-section-area">

Variable tersebut menyimpan object DOM dari container tersebut.

13. Menghapus HTML di dalamnya

Lecture menggunakan:

mainSectionArea.innerHTML = "";

Artinya:

Kosongkan semua HTML yang ada di dalam mainSectionArea.

Sebelumnya:

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

    <section class="homepage">
        ...
    </section>

    <section class="emi-calculator-page">
        ...
    </section>

    <section class="apply-loan-page">
        ...
    </section>

</div>

Setelah:

mainSectionArea.innerHTML = "";

menjadi:

<div class="main-section-area">
</div>

Semua section di dalamnya hilang dari DOM.

14. Ini menimbulkan masalah besar

Nah, bagian ini sangat penting karena lecture sengaja menunjukkan kesalahan tersebut.

Setelah kita melakukan:

mainSectionArea.innerHTML = "";

section:

<section class="homepage">

sudah tidak ada lagi di DOM.

Maka kalau kita kemudian melakukan:

document.querySelector(".homepage");

hasilnya:

null

Kenapa?

Karena kita meminta:

“Cari .homepage di DOM.”

Tetapi sebelumnya kita sudah mengatakan:

“Hapus .homepage dari DOM.”

15. Ini bukan karena `querySelector()` rusak

Ini penting.

Misalnya:

let homepage = document.querySelector(".homepage");

hasilnya null.

Jangan berpikir:

“Kenapa querySelector tidak menemukan HTML yang jelas-jelas ada di file HTML?”

Jawabannya:

HTML source file memang masih punya HTML tersebut, tetapi DOM yang sedang berjalan sudah tidak punya element tersebut.

Ini menghubungkan dengan lecture sebelumnya.

16. HTML source vs DOM sekali lagi

File:

index.html

mungkin masih memiliki:

<section class="homepage">

Tetapi ketika JavaScript menjalankan:

mainSectionArea.innerHTML = "";

DOM aktif berubah.

index.html
    ↓
Browser
    ↓
DOM
    ↓
JavaScript:
innerHTML = ""
    ↓
DOM berubah
    ↓
homepage hilang dari DOM

File HTML aslinya tidak otomatis ditulis ulang.

17. Kesalahan pertama lecture

Jadi pendekatan awal:

mainSectionArea.innerHTML = "";

let content = document.querySelector(".homepage");

mainSectionArea.innerHTML = content;

tidak berhasil.

Kenapa?

Urutannya:

1. Hapus semua section
       ↓
2. Cari homepage
       ↓
3. homepage sudah tidak ada
       ↓
4. querySelector() → null

Ini contoh bagus tentang pentingnya urutan eksekusi JavaScript.

18. Solusinya: ambil dulu sebelum menghapus

Lecture kemudian memperbaiki pendekatan.

Sebelum:

mainSectionArea.innerHTML = "";

kita terlebih dahulu mengambil semua section yang kita perlukan.

Misalnya:

let homeContent =
    document.querySelector(".homepage");

let emiCalContent =
    document.querySelector(".emi-calculator-page");

let loanContent =
    document.querySelector(".apply-loan-page");

Sekarang kita sudah memiliki referensi ke ketiga element tersebut.

Secara konsep:

DOM
│
├── homepage ─────────────→ homeContent
├── emi calculator ───────→ emiCalContent
└── loan ─────────────────→ loanContent

Baru setelah itu kita kosongkan container:

mainSectionArea.innerHTML = "";

19. Kenapa masih bisa menggunakan element setelah dihapus?

Ini konsep yang cukup menarik.

Misalnya:

let homeContent =
    document.querySelector(".homepage");

Variable homeContent sekarang menyimpan object DOM tersebut.

Kemudian:

mainSectionArea.innerHTML = "";

menghapus element tersebut dari DOM tree.

Tetapi reference di:

homeContent

masih menunjuk ke object element yang tadi kita ambil.

Jadi secara sederhana:

homeContent
      ↓
[ object <section class="homepage"> ]

Walaupun object tersebut sudah tidak menjadi child dari mainSectionArea, reference-nya masih ada di variable.

20. `outerHTML`

Kemudian lecture menggunakan:

homeContent.outerHTML

Ini penting.

Sebelumnya kita belajar:

element.innerHTML

Bedanya dengan:

element.outerHTML

adalah:

`innerHTML`

Mengambil isi di dalam element.

Misalnya:

<section class="homepage">
    <h1>Hello</h1>
</section>

Maka:

section.innerHTML

menghasilkan kira-kira:

<h1>Hello</h1>

`outerHTML`

Mengambil element beserta dirinya sendiri.

section.outerHTML

menghasilkan:

<section class="homepage">
    <h1>Hello</h1>
</section>

Jadi:

innerHTML
= isi di dalam

outerHTML
= element + isi di dalam

Ini sangat penting untuk memahami solusi lecture.

21. Kenapa harus menggunakan `outerHTML`?

Misalnya:

let homeContent =
    document.querySelector(".homepage");

homeContent adalah object DOM, bukan string HTML.

Kalau kita ingin memasukkannya menggunakan:

mainSectionArea.innerHTML = ...

kita membutuhkan string HTML.

Maka:

homeContent.outerHTML

mengubah representasi element tersebut menjadi HTML string.

Misalnya:

mainSectionArea.innerHTML =
    homeContent.outerHTML;

Hasilnya:

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

    <section class="homepage">
        ...
    </section>

</div>

22. Urutan proses yang benar

Sekarang urutannya menjadi:

1. Cari Home
2. Cari EMI
3. Cari Loan
       ↓
4. Simpan reference-nya
       ↓
5. Kosongkan main-section-area
       ↓
6. Lihat selectedTab
       ↓
7. Pilih content yang sesuai
       ↓
8. Masukkan outerHTML ke container

Ini jauh lebih masuk akal.

23. Contoh function-nya

Secara konsep, kode lecture menjadi seperti:

let selectedTab = "homepage";

let mainSectionArea =
    document.querySelector(".main-section-area");

let homeContent =
    document.querySelector(".homepage");

let emiCalContent =
    document.querySelector(".emi-calculator-page");

let loanContent =
    document.querySelector(".apply-loan-page");

function renderSelectedSection(selectedTab) {

    mainSectionArea.innerHTML = "";

    switch (selectedTab) {

        case "homepage":
            mainSectionArea.innerHTML =
                homeContent.outerHTML;
            break;

        case "emi-calculator-page":
            mainSectionArea.innerHTML =
                emiCalContent.outerHTML;
            break;

        case "apply-loan-page":
            mainSectionArea.innerHTML =
                loanContent.outerHTML;
            break;
    }
}

renderSelectedSection(selectedTab);

Ini inti dari lecture.

24. Mari baca kode tersebut seperti manusia

Bagian ini:

let selectedTab = "homepage";

artinya:

Saat ini kita ingin menampilkan Home.

Kemudian:

let mainSectionArea =
    document.querySelector(".main-section-area");

artinya:

Cari container tempat kita akan menampilkan section.

Kemudian:

let homeContent =
    document.querySelector(".homepage");

artinya:

Ambil section Home.

Begitu juga:

let emiCalContent =
    document.querySelector(".emi-calculator-page");

Ambil section EMI.

Dan:

let loanContent =
    document.querySelector(".apply-loan-page");

Ambil section Loan.

25. Function render

Kemudian:

function renderSelectedSection(selectedTab) {

artinya:

Buat function yang tugasnya menentukan section mana yang harus ditampilkan.

Di dalamnya:

mainSectionArea.innerHTML = "";

artinya:

Bersihkan section yang sedang ditampilkan.

Kemudian:

switch (selectedTab)

artinya:

Sekarang lihat user memilih tab apa.

Kalau:

case "homepage":

maka:

mainSectionArea.innerHTML =
    homeContent.outerHTML;

artinya:

Masukkan HTML Home ke container.

Kalau:

case "emi-calculator-page":

maka:

mainSectionArea.innerHTML =
    emiCalContent.outerHTML;

artinya:

Masukkan HTML EMI Calculator.

Dan seterusnya.

26. Hasil akhirnya

Misalnya:

selectedTab = "homepage";

DOM menjadi kira-kira:

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

    <section class="homepage">
        ...
    </section>

</div>

Hanya Home.

Kalau:

selectedTab = "emi-calculator-page";

DOM:

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

    <section class="emi-calculator-page">
        ...
    </section>

</div>

Hanya EMI.

Kalau:

selectedTab = "apply-loan-page";

DOM:

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

    <section class="apply-loan-page">
        ...
    </section>

</div>

Hanya Loan.

27. Kenapa disebut “dynamic rendering”?

Karena HTML yang sedang ada di container berubah berdasarkan nilai variable.

Misalnya:

selectedTab = "homepage";

↓

Homepage

Kemudian ubah:

selectedTab = "emi-calculator-page";

↓

EMI Calculator

Kemudian:

selectedTab = "apply-loan-page";

↓

Apply for Loan

Jadi satu halaman dapat memiliki berbagai tampilan berdasarkan state/keadaan tertentu.

28. Ini sebenarnya dasar sistem tab

Sekarang bayangkan nanti kita punya:

┌──────┬─────────────────┬─────────────────┐
│ Home │ EMI Calculator  │ Apply for Loan │
└──────┴─────────────────┴─────────────────┘

User klik:

EMI Calculator

JavaScript akan melakukan kira-kira:

selectedTab = "emi-calculator-page";
renderSelectedSection(selectedTab);

Kemudian:

selectedTab
     ↓
"emi-calculator-page"
     ↓
switch
     ↓
case "emi-calculator-page"
     ↓
ambil emiCalContent
     ↓
masukkan ke mainSectionArea
     ↓
EMI Calculator tampil

Inilah yang akan dibuat bekerja pada lecture-lecture berikutnya.

29. Kenapa tab belum bekerja?

Lecture mengatakan:

Tabs are not working yet.

Ini memang sengaja.

Karena lecture ini fokus pada:

bagaimana merender content berdasarkan selectedTab

Belum fokus pada:

bagaimana mengetahui bahwa user mengklik tab.

Nanti kemungkinan besar kita akan belajar event seperti:

click

dan:

addEventListener()

Sehingga alurnya menjadi:

User klik Home
       ↓
event terjadi
       ↓
selectedTab = "homepage"
       ↓
renderSelectedSection()
       ↓
Home tampil

Atau:

User klik EMI
       ↓
selectedTab = "emi-calculator-page"
       ↓
renderSelectedSection()
       ↓
EMI tampil

30. Hubungan dengan `switch` lecture sebelumnya

Ini contoh nyata kapan switch berguna.

Sebelumnya kita belajar:

switch (day) {
    case 1:
        ...
        break;

    case 2:
        ...
        break;
}

Sekarang konsep yang sama:

switch (selectedTab) {
    case "homepage":
        ...
        break;

    case "emi-calculator-page":
        ...
        break;

    case "apply-loan-page":
        ...
        break;
}

Perbedaannya hanya nilai yang dibandingkan.

Dulu:

1, 2, 3

Sekarang:

"homepage"
"emi-calculator-page"
"apply-loan-page"

31. Hubungan dengan `innerHTML` lecture sebelumnya

Kamu sebelumnya belajar:

element.innerHTML = "...";

Sekarang kita benar-benar melihat kegunaannya.

Misalnya:

mainSectionArea.innerHTML =
    homeContent.outerHTML;

Artinya:

“Masukkan HTML ini ke dalam mainSectionArea.”

Jadi innerHTML bukan hanya untuk mengubah text.

Ia juga bisa digunakan untuk mengganti struktur HTML di dalam sebuah element.

32. Hubungan dengan `querySelector()`

Sebelumnya:

document.querySelector(".homepage");

digunakan untuk mengambil element.

Sekarang:

let homeContent =
    document.querySelector(".homepage");

Kemudian element tersebut dipakai kembali untuk rendering.

Jadi sekarang kamu melihat kombinasi:

querySelector()
      ↓
ambil DOM element
      ↓
outerHTML
      ↓
innerHTML
      ↓
render kembali ke DOM

33. Konsep yang sangat penting: DOM bisa berubah

Sebelumnya kita mungkin membayangkan:

DOM = HTML yang sudah dibuat browser

Sekarang kita perlu memperbarui pemahaman:

DOM adalah struktur halaman yang bisa berubah selama website berjalan.

Awalnya:

DOM
├── Home
├── EMI
└── Loan

Setelah render Home:

DOM
└── Home

Setelah render EMI:

DOM
└── EMI

Setelah render Loan:

DOM
└── Loan

Jadi DOM itu dinamis.

34. Analogi paling mudah: panggung teater 🎭

Bayangkan website adalah sebuah panggung.

Di belakang panggung tersedia 3 set:

🏠 Home
🧮 EMI Calculator
💰 Apply Loan

Tapi panggung hanya boleh menampilkan satu set.

Variable:

selectedTab

adalah seperti sutradara yang mengatakan:

“Sekarang tampilkan Home.”

Function:

renderSelectedSection()

adalah kru panggung.

Kru melakukan:

1. Bersihkan panggung
2. Lihat instruksi sutradara
3. Ambil set yang diminta
4. Pasang set tersebut

Kalau:

selectedTab = "homepage";

→ pasang Home.

Kalau:

selectedTab = "emi-calculator-page";

→ pasang EMI.

Kalau:

selectedTab = "apply-loan-page";

→ pasang Loan.

Itulah dynamic rendering.

35. Hal yang agak membingungkan: kenapa tidak langsung menyembunyikan CSS?

Kamu mungkin berpikir:

“Kenapa tidak pakai CSS saja?”

Misalnya:

.homepage {
    display: none;
}

dan kemudian:

.active {
    display: block;
}

Itu memang bisa.

Tetapi pendekatan lecture ini berbeda.

Lecture sedang menunjukkan cara:

menghapus dan memasukkan HTML ke DOM secara dinamis.

Jadi bukan hanya:

semua element ada → sebagian disembunyikan

melainkan:

container kosong
      ↓
masukkan section yang diperlukan

Ini konsep yang berbeda.

36. `innerHTML = ""` vs `display: none`

Ini penting dibedakan.

`display: none`

Element masih ada di DOM:

DOM
├── Home       ← hidden
├── EMI        ← visible
└── Loan       ← hidden

`innerHTML = ""`

Element yang ada di dalam container dihapus dari DOM:

DOM
└── EMI

Jadi:

display: none
= element masih ada, hanya tidak terlihat

innerHTML = ""
= isi container benar-benar dihapus dari DOM

37. Catatan penting tentang pendekatan lecture

Untuk belajar DOM, pendekatan outerHTML + innerHTML ini bagus karena memperlihatkan konsep dengan jelas.

Tetapi dalam aplikasi yang lebih besar, kita biasanya tidak selalu mengambil element lalu menghancurkan dan membuat ulang seluruh HTML seperti ini.

Ada pendekatan lain seperti:

element.hidden = true;

atau:

classList.add("active");

atau membuat element dengan:

document.createElement()

atau menggunakan framework seperti React/Vue.

Tetapi jangan terlalu dipikirkan dulu.

Untuk tahap course kamu sekarang, yang paling penting adalah memahami:

JavaScript dapat menentukan HTML mana yang sedang berada di DOM.

38. Satu detail penting: `outerHTML` bukan object DOM

Ini juga bagus untuk dibedakan.

Misalnya:

let homeContent =
    document.querySelector(".homepage");

homeContent adalah:

DOM Element Object

Sedangkan:

homeContent.outerHTML

adalah:

String HTML

Jadi:

homeContent
     ↓
DOM object

homeContent.outerHTML
     ↓
HTML string

Ini alasan lecture awalnya melihat:

console.log(homeContent);

sebagai object.

Kemudian menggunakan:

homeContent.outerHTML

untuk mendapatkan HTML-nya.

39. Alur lengkap lecture ini

Kalau disederhanakan, seluruh lecture bisa kamu hafalkan sebagai:

                 selectedTab
                     ↓
          renderSelectedSection()
                     ↓
              kosongkan container
                     ↓
                 switch()
                     ↓
        ┌────────────┼─────────────┐
        ↓            ↓             ↓
      Home           EMI          Loan
        ↓            ↓             ↓
   homeContent   emiCalContent  loanContent
        ↓            ↓             ↓
       outerHTML
        ↓
   mainSectionArea.innerHTML
        ↓
           DOM berubah
        ↓
       halaman berubah

40. Kesalahan pertama → pelajaran penting

Bagian lecture yang menurut saya paling berharga justru error yang sengaja dibuat instructor.

Dia awalnya:

mainSectionArea.innerHTML = "";

kemudian:

document.querySelector(".homepage");

hasil:

null

Pelajarannya:

Urutan operasi DOM sangat penting.

Kalau kamu menghapus element terlebih dahulu:

element.innerHTML = "";

kamu tidak bisa berharap:

document.querySelector(...)

masih menemukan element yang baru saja kamu hapus dari DOM.

Solusinya:

AMBIL DULU
   ↓
SIMPAN REFERENCE
   ↓
HAPUS
   ↓
GUNAKAN REFERENCE

41. Cheat sheet lecture

Menyimpan tab yang dipilih

let selectedTab = "homepage";

Mengambil container

let mainSectionArea =
    document.querySelector(".main-section-area");

Mengambil section

let homeContent =
    document.querySelector(".homepage");

Mengambil HTML element + dirinya

homeContent.outerHTML

Mengosongkan container

mainSectionArea.innerHTML = "";

Memasukkan HTML

mainSectionArea.innerHTML =
    homeContent.outerHTML;

Memilih berdasarkan nilai

switch (selectedTab) {
    case "homepage":
        ...
        break;

    case "emi-calculator-page":
        ...
        break;

    case "apply-loan-page":
        ...
        break;
}

42. Bedakan `innerHTML` dan `outerHTML`

Ini wajib masuk kepala:

HTML:

<section class="homepage">
    <h1>Hello</h1>
</section>

`innerHTML`

section.innerHTML

hasil:

<h1>Hello</h1>

`outerHTML`

section.outerHTML

hasil:

<section class="homepage">
    <h1>Hello</h1>
</section>

Jadi:

INNER = isi dalam
OUTER = dirinya + isi dalam

43. Hubungkan semua lecture yang sudah kamu pelajari

Sekarang mulai kelihatan bagaimana materi-materi sebelumnya saling terhubung.

Variable
   ↓
selectedTab
   ↓
Function
   ↓
renderSelectedSection()
   ↓
switch
   ↓
querySelector()
   ↓
DOM element
   ↓
outerHTML
   ↓
innerHTML
   ↓
DOM berubah
   ↓
web page berubah

Ini sebenarnya salah satu milestone penting dalam belajar JavaScript.

Kamu tidak lagi hanya belajar:

let x = 10;

atau:

if (x > 5)

tetapi mulai membuat JavaScript mengontrol tampilan website.

44. Kesimpulan paling sederhana

Kalau harus menjelaskan lecture ini dalam 5 kalimat, saya akan bilang:

Kita memiliki beberapa section HTML, tetapi ingin menampilkan satu section sesuai tab yang dipilih.
selectedTab digunakan untuk menyimpan section mana yang sedang dipilih.
switch digunakan untuk menentukan section mana yang harus dirender.
Sebelum menghapus isi container, kita mengambil dan menyimpan reference setiap section karena setelah element dihapus dari DOM, querySelector() tidak akan bisa menemukannya lagi.
Kita menggunakan outerHTML untuk mengambil HTML lengkap dari section, lalu memasukkannya ke mainSectionArea.innerHTML, sehingga DOM dan tampilan halaman berubah secara dinamis.

Mental model yang paling penting:

"Mana yang dipilih?"
        ↓
 selectedTab
        ↓
"Harus tampil apa?"
        ↓
     switch
        ↓
"Ambil HTML-nya"
        ↓
   outerHTML
        ↓
"Masukkan ke halaman"
        ↓
   innerHTML
        ↓
     DOM berubah
        ↓
  Tampilan berubah

Dan lecture berikutnya kemungkinan akan membuat bagian yang sekarang masih manual menjadi benar-benar interaktif: ketika user mengklik tab, selectedTab berubah dan function render dipanggil kembali. Itu akan menjadi penghubung penting antara DOM + function + event + dynamic rendering.

1. Gambaran besar dulu

2. Konsep baru: Dynamic Content Rendering

3. Variable selectedTab

4. Kenapa menggunakan variable?

5. Function renderSelectedSection()

6. Parameter dan argument lagi

7. Menggunakan switch

8. Ingat arti case

9. Contoh switch lengkap

10. Sekarang masalah sebenarnya

11. Membuat mainSectionArea

12. Mengambil main-section-area

13. Menghapus HTML di dalamnya

14. Ini menimbulkan masalah besar

15. Ini bukan karena querySelector() rusak

16. HTML source vs DOM sekali lagi

17. Kesalahan pertama lecture

18. Solusinya: ambil dulu sebelum menghapus

19. Kenapa masih bisa menggunakan element setelah dihapus?

20. outerHTML

innerHTML

outerHTML

21. Kenapa harus menggunakan outerHTML?

22. Urutan proses yang benar

23. Contoh function-nya

24. Mari baca kode tersebut seperti manusia

25. Function render

26. Hasil akhirnya

27. Kenapa disebut “dynamic rendering”?

28. Ini sebenarnya dasar sistem tab

29. Kenapa tab belum bekerja?

30. Hubungan dengan switch lecture sebelumnya

31. Hubungan dengan innerHTML lecture sebelumnya

32. Hubungan dengan querySelector()

33. Konsep yang sangat penting: DOM bisa berubah

34. Analogi paling mudah: panggung teater 🎭

35. Hal yang agak membingungkan: kenapa tidak langsung menyembunyikan CSS?

36. innerHTML = "" vs display: none

display: none

innerHTML = ""

37. Catatan penting tentang pendekatan lecture

38. Satu detail penting: outerHTML bukan object DOM

39. Alur lengkap lecture ini

40. Kesalahan pertama → pelajaran penting

41. Cheat sheet lecture

Menyimpan tab yang dipilih

Mengambil container

Mengambil section

Mengambil HTML element + dirinya

Mengosongkan container

Memasukkan HTML

Memilih berdasarkan nilai

42. Bedakan innerHTML dan outerHTML

innerHTML

outerHTML

43. Hubungkan semua lecture yang sudah kamu pelajari

44. Kesimpulan paling sederhana

3. Variable `selectedTab`

5. Function `renderSelectedSection()`

7. Menggunakan `switch`

8. Ingat arti `case`

11. Membuat `mainSectionArea`

12. Mengambil `main-section-area`

15. Ini bukan karena `querySelector()` rusak

20. `outerHTML`

`innerHTML`

`outerHTML`

21. Kenapa harus menggunakan `outerHTML`?

30. Hubungan dengan `switch` lecture sebelumnya

31. Hubungan dengan `innerHTML` lecture sebelumnya

32. Hubungan dengan `querySelector()`

36. `innerHTML = ""` vs `display: none`

`display: none`

`innerHTML = ""`

38. Satu detail penting: `outerHTML` bukan object DOM

42. Bedakan `innerHTML` dan `outerHTML`

`innerHTML`

`outerHTML`