HTML Dasar #28 - Mengambil dan Mengubah Isi Elemen HTML (innerHTML, textContent)

byFerdian Rahabista -
0

Setelah kita belajar alert, prompt, dan confirm, sekarang saatnya mengenal cara mengambil dan mengubah isi elemen HTML menggunakan JavaScript. Ini adalah fondasi interaktivitas website - kemampuan untuk mengubah konten halaman tanpa reload.

Apa Itu innerHTML dan textContent?

innerHTML dan textContent adalah properti yang digunakan untuk mengakses dan mengubah isi dari elemen HTML. Keduanya mirip tapi punya perbedaan penting.

Properti Fungsi Mengerti HTML? Contoh
innerHTML Mengambil/mengubah isi termasuk tag HTML Ya element.innerHTML = "<strong>Tebal</strong>"
textContent Mengambil/mengubah isi teks saja (HTML diabaikan) Tidak element.textContent = "Teks biasa"
Perbedaan Utama:
- innerHTML membaca/menulis kode HTML - bisa menyisipkan tag seperti <strong>, <em>, <a>
- textContent hanya membaca/menulis teks biasa - semua tag HTML akan ditampilkan sebagai teks mentah
- Keamanan: textContent lebih aman dari serangan XSS (Cross-Site Scripting)

1. Mengambil Isi Elemen (Membaca)

Pertama, kita harus memilih elemen yang ingin diambil isinya menggunakan document.getElementById() atau method selector lainnya.

Contoh Mengambil Teks dengan textContent:

<p id="demoPesan">Halo, selamat belajar JavaScript!</p>
<button onclick="ambilTeks()">Ambil Teks</button>

<script>
    function ambilTeks() {
        let elemen = document.getElementById("demoPesan");
        let teks = elemen.textContent;
        alert("Isi paragraf: " + teks);
    }
</script>

Hasilnya:

Halo, selamat belajar JavaScript!

Contoh Mengambil HTML dengan innerHTML:

<div id="demoHTML">
    <strong>Teks tebal</strong> dan <em>teks miring</em>
</div>
<button onclick="ambilHTML()">Ambil HTML</button>

<script>
    function ambilHTML() {
        let elemen = document.getElementById("demoHTML");
        let html = elemen.innerHTML;
        alert("Isi HTML: " + html);
    }
</script>

Hasilnya:

Teks tebal dan teks miring
Perhatikan Perbedaannya:
- textContent hanya mengambil teks: "Teks tebal dan teks miring"
- innerHTML mengambil termasuk tag: "<strong>Teks tebal</strong> dan <em>teks miring</em>"

2. Mengubah Isi Elemen (Menulis)

Kita bisa mengubah isi elemen dengan mengassign nilai baru ke properti innerHTML atau textContent.

Contoh Mengubah Teks dengan textContent:

<p id="ubahTeks">Teks asli</p>
<button onclick="gantiTeks()">Ganti Teks</button>

<script>
    function gantiTeks() {
        let elemen = document.getElementById("ubahTeks");
        elemen.textContent = "Teks telah diubah!";
    }
</script>

Hasilnya:

Teks asli

Contoh Mengubah HTML dengan innerHTML (menambahkan tag):

<p id="ubahHTML">Teks biasa</p>
<button onclick="gantiHTML()">Ganti dengan HTML</button>

<script>
    function gantiHTML() {
        let elemen = document.getElementById("ubahHTML");
        elemen.innerHTML = "<strong>Teks tebal</strong> dan <em>teks miring</em>";
    }
</script>

Hasilnya:

Teks biasa

3. Perbedaan Visual innerHTML vs textContent

Menggunakan textContent

<strong>Teks</strong> akan tampil sebagai teks biasa

Menggunakan innerHTML

<strong>Teks</strong> akan tampil sebagai teks tebal

Klik kedua tombol di atas untuk melihat perbedaan. textContent menampilkan tag HTML sebagai teks biasa, innerHTML menampilkan sebagai format HTML.

Peringatan Keamanan:
Jangan pernah menggunakan innerHTML dengan data dari pengguna (seperti dari prompt atau input form) tanpa membersihkan (sanitize) terlebih dahulu. Ini bisa menyebabkan serangan XSS (Cross-Site Scripting) di mana penjahat bisa menyisipkan kode jahat.

Contoh berbahaya:
element.innerHTML = prompt("Masukkan komentar:");
Jika pengguna memasukkan <script>alert('Hack!')</script>, kode itu akan dijalankan!

Solusi: Gunakan textContent jika hanya butuh teks, atau gunakan fungsi sanitasi.

4. Menambahkan Konten (Bukan Mengganti)

Kita juga bisa menambahkan konten ke elemen tanpa menghapus konten yang sudah ada menggunakan operator +=.

Contoh Menambahkan Konten:

<ul id="daftarKomentar">
    <li>Komentar 1</li>
    <li>Komentar 2</li>
</ul>
<button onclick="tambahKomentar()">Tambah Komentar</button>

<script>
    let counter = 3;
    function tambahKomentar() {
        let daftar = document.getElementById("daftarKomentar");
        daftar.innerHTML += "<li>Komentar " + counter + "</li>";
        counter++;
    }
</script>

Hasilnya:

  • Komentar 1
  • Komentar 2

5. Mengosongkan Isi Elemen

Untuk mengosongkan isi elemen, cukup assign string kosong.

<div id="container">
    <p>Konten yang akan dihapus</p>
</div>
<button onclick="kosongkan()">Kosongkan</button>

<script>
    function kosongkan() {
        let container = document.getElementById("container");
        container.innerHTML = "";
    }
</script>

Konten yang akan dihapus

6. innerHTML vs textContent - Kapan Menggunakan?

Skenario Rekomendasi Alasan
Menampilkan teks dari pengguna textContent Aman dari XSS, HTML tidak akan dieksekusi
Menyisipkan tag HTML (gambar, link, format) innerHTML Membutuhkan parsing HTML
Membaca isi elemen untuk diproses textContent Lebih cepat dan hanya mengambil teks
Membangun struktur HTML kompleks innerHTML Lebih mudah dan cepat

Contoh Proyek: Aplikasi Catatan Sederhana (To-Do List)

Berikut aplikasi catatan yang memanfaatkan innerHTML untuk menampilkan daftar tugas dan textContent untuk mengambil input.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>To-Do List - innerHTML & textContent</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        .todo-card {
            background: white;
            border-radius: 20px;
            padding: 30px;
            max-width: 500px;
            width: 100%;
            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
        }
        h1 {
            text-align: center;
            color: #1e293b;
            margin-bottom: 20px;
        }
        .input-group {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }
        .input-group input {
            flex: 1;
            padding: 12px;
            border: 2px solid #e2e8f0;
            border-radius: 10px;
            font-size: 14px;
        }
        .input-group button {
            background: #3b82f6;
            color: white;
            border: none;
            padding: 12px 20px;
            border-radius: 10px;
            cursor: pointer;
        }
        .input-group button:hover {
            background: #2563eb;
        }
        #todoList {
            list-style: none;
            padding: 0;
        }
        #todoList li {
            background: #f8fafc;
            padding: 12px 15px;
            margin-bottom: 10px;
            border-radius: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .delete-btn {
            background: #ef4444;
            color: white;
            border: none;
            padding: 5px 12px;
            border-radius: 6px;
            cursor: pointer;
        }
        .delete-btn:hover {
            background: #dc2626;
        }
        .empty-message {
            text-align: center;
            color: #94a3b8;
            padding: 20px;
        }
        .info {
            background: #eef2ff;
            padding: 15px;
            border-radius: 10px;
            margin-top: 20px;
            font-size: 13px;
        }
    </style>
</head>
<body>

    <div class="todo-card">
        <h1>To-Do List</h1>
        
        <div class="input-group">
            <input type="text" id="todoInput" placeholder="Tambah tugas baru...">
            <button id="addBtn">Tambah</button>
        </div>
        
        <ul id="todoList">
            <li>Belajar innerHTML & textContent</li>
            <li>Praktik membuat to-do list</li>
        </ul>
        
        <div class="info">
            Penjelasan: Saat menambah tugas, kita mengambil nilai input dengan textContent (atau .value untuk input) dan menambahkan ke daftar menggunakan innerHTML. Hapus tugas menggunakan innerHTML untuk memperbarui daftar.
        </div>
    </div>

    <script>
        const todoInput = document.getElementById('todoInput');
        const addBtn = document.getElementById('addBtn');
        const todoList = document.getElementById('todoList');
        
        function updateEmptyMessage() {
            if (todoList.children.length === 0) {
                todoList.innerHTML = '<li class="empty-message">Belum ada tugas. Tambah tugas baru!</li>';
            }
        }
        
        function addTodo() {
            const tugas = todoInput.value.trim();
            
            if (tugas === "") {
                alert("Harap masukkan tugas terlebih dahulu!");
                return;
            }
            
            // Hapus pesan kosong jika ada
            if (todoList.children.length === 1 && todoList.children[0].classList?.contains('empty-message')) {
                todoList.innerHTML = "";
            }
            
            // Tambah tugas baru
            const newTodo = document.createElement('li');
            newTodo.innerHTML = `
                ${tugas}
                
            `;
            todoList.appendChild(newTodo);
            
            // Kosongkan input
            todoInput.value = "";
            todoInput.focus();
        }
        
        function hapusTugas(button) {
            const li = button.parentElement;
            li.remove();
            updateEmptyMessage();
        }
        
        addBtn.addEventListener('click', addTodo);
        todoInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                addTodo();
            }
        });
        
        updateEmptyMessage();
    </script>

</body>
</html>

Hasil visual to-do list:

To-Do List

  • Belajar innerHTML & textContent
  • Praktik membuat to-do list

Kesalahan Umum Pemula

  • Lupa menggunakan document.getElementById sebelum mengakses innerHTML/textContent → Harus pilih elemen dulu.
  • Mencoba menggunakan innerHTML/textContent pada elemen yang tidak ditemukan → Pastikan ID elemen benar dan sudah dimuat (letakkan script di akhir body).
  • Menggunakan innerHTML untuk input dari pengguna → Berbahaya! Bisa terkena serangan XSS.
  • Lupa bahwa innerHTML menghapus event listener yang sudah ada → Jika menggunakan innerHTML untuk mengganti konten, event listener lama akan hilang.
  • Typo pada nama properti → innerHtml (salah, huruf H besar) vs innerHTML (benar, semua huruf besar).
Debugging Tips:
  • Gunakan console.log(element.innerHTML) untuk melihat isi HTML elemen
  • Jika perubahan tidak muncul, cek apakah elemen berhasil dipilih: console.log(element) (jika null, berarti ID salah)
  • Pastikan script dijalankan setelah elemen HTML dimuat (letakkan script di akhir body atau gunakan DOMContentLoaded)

Latihan Singkat

  1. Buat file HTML baru dengan judul "Latihan innerHTML"
  2. Buat sebuah paragraf dengan ID "demo" dan teks "Halo Dunia"
  3. Buat tombol yang mengubah teks paragraf menjadi "Teks telah diubah!" menggunakan textContent
  4. Buat tombol lain yang mengubah paragraf menjadi teks tebal menggunakan innerHTML
  5. Buat tombol untuk menampilkan alert berisi isi paragraf saat ini
  6. Simpan dan buka di browser, coba semua tombol

Intisari Hari Ini

  • innerHTML → mengambil/mengubah isi termasuk tag HTML
  • textContent → mengambil/mengubah isi teks saja (HTML diabaikan)
  • Gunakan document.getElementById("id") untuk memilih elemen
  • Gunakan += untuk menambahkan konten (bukan mengganti)
  • Jangan gunakan innerHTML dengan data dari pengguna (risiko XSS)
  • Gunakan textContent untuk keamanan jika tidak butuh HTML
Tantangan Akhir Pekan: Buat sebuah Aplikasi Daftar Belanja yang interaktif! Persyaratan:
  • Input teks untuk menambah item belanja
  • Tombol "Tambah" untuk menambahkan item ke daftar
  • Setiap item yang ditambahkan memiliki tombol "Hapus" untuk menghapus item tersebut
  • Tombol "Hapus Semua" untuk mengosongkan seluruh daftar
  • Tampilkan jumlah item yang belum dibeli (counter)
  • Setiap item bisa ditandai sebagai "sudah dibeli" (centang) dengan mengubah warna atau style coret
  • Gunakan innerHTML untuk menampilkan daftar, dan textContent untuk membaca input
  • Gunakan CSS yang menarik (border-radius, hover effect, warna yang enak dilihat)

Bonus: Simpan daftar belanja ke localStorage agar tidak hilang saat halaman di-refresh.

Selamat mencoba!

Artikel Sebelumnya: HTML Dasar #27 - Menampilkan Alert dan Prompt dengan JavaScript
Artikel Selanjutnya: HTML Dasar #29 - Menambahkan Event Klik (onclick) pada Tombol

Anda mungkin menyukai postingan ini

Lebih baru Lebih lama

نموذج الاتصال