MENGUBAH KONTEN ELEMEN - DOM

Mengubah konten elemen adalah sebuah tindakan dimana programmer mengubah teks atau HTML yang ada dalam suatu elemen. Fungsi ini sangat penting dalam pengembangan web, karena memungkinkan kita untuk berinteraksi dan memanipulasi konten yang ada pada halaman web. Dalam bahasa pemrograman JavaScript, kita dapat menggunakan Document Object Model (DOM) untuk mencapai tujuan tersebut.

Mengubah Konten Elemen Teks

Untuk mengubah konten teks dari sebuah elemen, kita bisa memanfaatkan properti .textContent dari elemen tersebut. Berikut adalah contoh penggunaannya:

// Mengambil elemen dengan id "contoh"
var element = document.getElementById("contoh");

// Mengubah konten teks elemen
element.textContent = "Ini adalah teks baru";

Pada kode di atas, kita pertama mengambil elemen dengan id “contoh” dan kemudian mengubah konten teksnya menjadi “Ini adalah teks baru”.

Mengubah Konten Elemen HTML

Selain teks biasa, JavaScript juga memungkinkan kita untuk mengubah konten HTML dari sebuah elemen. Kita bisa menggunakan properti .innerHTML untuk tujuan ini. Berikut adalah cara penggunaannya:

// Mengambil elemen dengan id "contoh"
var element = document.getElementById("contoh");

// Mengubah konten HTML elemen
element.innerHTML = "<b>Ini adalah teks baru</b>";

Pada contoh ini, kita tidak hanya mengubah teks, tetapi juga menambahkan elemen HTML baru (yaitu elemen <b>), yang akan membuat teks tersebut menjadi tebal.

Catatan

Ada beberapa hal penting yang perlu diingat ketika menggunakan .textContent dan .innerHTML:

• .textContent hanya akan mengubah teks, sedangkan .innerHTML dapat mengubah teks dan juga elemen HTML.
• .textContent tidak akan menginterpretasikan elemen HTML, sedangkan .innerHTML menginterpretasikannya sebagai elemen HTML.
• Menggunakan .innerHTML dapat menambah risiko terhadap serangan Cross-Site Scripting (XSS) apabila kamu tidak hati-hati dalam menangani input pengguna.

Begitulah cara mengubah konten elemen dengan JavaScript menggunakan DOM. Sekarang, kamu sudah dapat menyesuaikan konten di halaman webmu sesuai keinginan. Selamat mencoba dan berlatih dalam pengembangan JavaScriptmu!