JavaScript Academy · Pelajaran

Mengubah Teks dan Konten HTML

Perbarui konten dengan textContent dan innerHTML.

Mengubah Teks dan Konten HTML adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.

Membaca dan Menulis Teks

Untuk mengubah tampilan elemen, Anda dapat menetapkan teks atau HTML-nya. Pilihan yang tepat bergantung pada apakah Anda memerlukan markah dan seberapa besar Anda mempercayai datanya.

textContent

textContent mengambil atau menetapkan teks mentah suatu elemen. Menetapkannya akan mengganti semua anak dengan satu simpul teks dan memperlakukan masukan sebagai teks biasa.

const el = document.querySelector("#status");
el.textContent = "Saved!";

textContent Menghindari Markah

Karena berupa teks biasa, HTML apa pun di dalam string akan ditampilkan secara harfiah, bukan diuraikan. Hal ini membuatnya aman dari penyisipan berbahaya.

el.textContent = "<b>hi</b>";
// displays the literal characters <b>hi</b>

innerHTML

innerHTML mengambil atau menetapkan markah HTML di dalam suatu elemen. Menetapkannya akan mengurai string sebagai HTML dan membuat simpul sungguhan.

const box = document.querySelector("#box");
box.innerHTML = "<strong>Done</strong>";

innerHTML Mengganti Semuanya

Menetapkan nilai ke innerHTML akan membuang anak yang sudah ada dan membangun ulang subpohon dari markah baru.

box.innerHTML = "<ul><li>One</li><li>Two</li></ul>";

Bahaya XSS

Jangan pernah memasukkan masukan pengguna yang tidak tepercaya ke dalam innerHTML. Teks berbahaya dapat menyisipkan skrip atau penangan peristiwa, yaitu kerentanan yang disebut XSS.

const userInput = getInput();
// DANGEROUS:
// box.innerHTML = userInput;
// SAFE:
box.textContent = userInput;

innerText

innerText mirip dengan textContent, tetapi memahami gaya: properti ini mencerminkan teks yang ditampilkan dan mengabaikan elemen tersembunyi.

console.log(el.innerText); // visible text only

textContent vs innerText

textContent mengembalikan semua teks, termasuk konten tersembunyi, dan lebih cepat karena tidak memicu tata letak. innerText memahami tata letak dan lebih lambat.

el.textContent; // all text, even display:none
el.innerText;   // only what is visually rendered

Menambahkan Teks dengan Aman

Untuk menambahkan teks tanpa menghapus simpul yang sudah ada, buat simpul teks atau gunakan insertAdjacentText, bukan menimpa textContent.

el.append(document.createTextNode(" extra"));
el.insertAdjacentText("beforeend", " more");

Menyisipkan HTML Tanpa Mengurai Ulang

insertAdjacentHTML menambahkan markah pada suatu posisi tanpa mengurai ulang seluruh elemen, sehingga lebih efisien daripada membangun ulang innerHTML.

box.insertAdjacentHTML("beforeend", "<li>New item</li>");

Memilih Properti yang Tepat

Gunakan textContent untuk teks biasa (pilihan bawaan yang aman), innerHTML hanya dengan markah tepercaya, dan innerText jika Anda memang memerlukan teks yang ditampilkan dan terlihat.

Pemeriksaan Singkat

Pilih pendekatan yang aman.

Rangkuman

textContent menetapkan teks biasa yang sudah dihindari dan merupakan pilihan bawaan yang aman. innerHTML mengurai markah, tetapi berisiko terhadap XSS jika digunakan dengan masukan yang tidak tepercaya. innerText hanya mencerminkan teks yang terlihat dan ditampilkan. Untuk menambahkan konten, utamakan insertAdjacentHTML/insertAdjacentText daripada menimpa seluruh elemen.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Mengubah Teks dan Konten HTML” gratis?

Ya — teks lengkap “Mengubah Teks dan Konten HTML” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Mengubah Teks dan Konten HTML”?

Perbarui konten dengan textContent dan innerHTML. Kamu berlatih JavaScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Mengubah Teks dan Konten HTML” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke JavaScript Academy