Replace Element Content Javascript

Replace Element Content Javascript

5 min read Jun 20, 2024
Replace Element Content Javascript

Mengganti Konten Elemen dengan JavaScript

JavaScript memungkinkan kita untuk memanipulasi elemen HTML secara dinamis, termasuk mengganti kontennya. Berikut beberapa cara untuk mengganti konten elemen dengan JavaScript:

1. Menggunakan innerHTML

Property innerHTML memungkinkan kita untuk mengganti seluruh konten HTML dari sebuah elemen.

Contoh:

const myElement = document.getElementById("myElement");
myElement.innerHTML = "Ini adalah konten baru!";

Kode di atas akan mengganti konten elemen dengan ID "myElement" dengan teks "Ini adalah konten baru!".

2. Menggunakan textContent

Property textContent memungkinkan kita untuk mengganti konten teks dari sebuah elemen, tanpa memanipulasi markup HTML.

Contoh:

const myElement = document.getElementById("myElement");
myElement.textContent = "Ini adalah konten teks baru!";

Kode di atas akan mengganti konten teks dari elemen dengan ID "myElement" dengan teks "Ini adalah konten teks baru!".

3. Menggunakan innerText

Property innerText mirip dengan textContent tetapi mempertimbangkan gaya yang diterapkan pada elemen, seperti bold dan italic.

Contoh:

const myElement = document.getElementById("myElement");
myElement.innerText = "Ini adalah konten teks dengan gaya!";

Kode di atas akan mengganti konten teks dari elemen dengan ID "myElement" dengan teks "Ini adalah konten teks dengan gaya!", termasuk gaya bold dan italic yang mungkin diterapkan pada elemen tersebut.

4. Menggunakan DOM Manipulation

Kita juga dapat memanipulasi DOM secara langsung untuk mengganti konten elemen.

Contoh:

const myElement = document.getElementById("myElement");
const newContent = document.createElement("p");
newContent.textContent = "Ini adalah konten baru dengan elemen baru!";
myElement.appendChild(newContent);

Kode di atas akan menambahkan sebuah elemen paragraf baru dengan teks "Ini adalah konten baru dengan elemen baru!" ke dalam elemen dengan ID "myElement".

Perbedaan innerHTML, textContent dan innerText

Property Deskripsi
innerHTML Mengganti seluruh konten HTML dari sebuah elemen.
textContent Mengganti konten teks dari sebuah elemen, tanpa memanipulasi markup HTML.
innerText Mengganti konten teks dari sebuah elemen, mempertimbangkan gaya yang diterapkan pada elemen.

Pilihlah metode yang paling sesuai dengan kebutuhan Anda.

Contoh Penggunaan

Berikut adalah contoh sederhana yang menggabungkan beberapa metode untuk mengganti konten elemen:




    
    
    Replace Element Content



    

Ini adalah konten awal.

Kode di atas akan menampilkan elemen <div> dengan konten yang berubah secara dinamis sesuai dengan instruksi JavaScript.

Kesimpulan

Mengganti konten elemen dengan JavaScript adalah teknik yang penting untuk membangun situs web interaktif. Dengan memahami berbagai metode yang tersedia, Anda dapat memilih cara yang paling efisien dan mudah untuk mengganti konten sesuai kebutuhan.