Replace Html Element With Another Javascript

Replace Html Element With Another Javascript

3 min read Jun 20, 2024
Replace Html Element With Another Javascript

Mengganti Elemen HTML dengan Elemen Lain Menggunakan JavaScript

JavaScript memberikan kemampuan untuk memanipulasi elemen HTML secara dinamis. Salah satunya adalah mengganti elemen HTML yang ada dengan elemen HTML lainnya. Ini sangat berguna untuk memperbarui tampilan situs web berdasarkan tindakan pengguna atau kondisi tertentu.

Cara Mengganti Elemen HTML dengan JavaScript

Berikut adalah langkah-langkah untuk mengganti elemen HTML dengan elemen lain menggunakan JavaScript:

  1. Mendapatkan Referensi ke Elemen yang Akan Diganti:

    Gunakan metode getElementById() atau querySelector() untuk mendapatkan referensi ke elemen HTML yang ingin diganti.

    const elementToBeReplaced = document.getElementById('oldElement');
    
  2. Membuat Elemen Baru:

    Buat elemen HTML baru yang ingin Anda gunakan sebagai pengganti. Anda dapat melakukannya dengan menggunakan metode createElement() dan kemudian menambahkan atribut dan konten yang diinginkan.

    const newElement = document.createElement('div');
    newElement.textContent = 'Ini adalah elemen baru';
    
  3. Mengganti Elemen:

    Gunakan metode replaceWith() untuk mengganti elemen lama dengan elemen baru yang telah Anda buat.

    elementToBeReplaced.replaceWith(newElement);
    

Contoh Kode Lengkap




Mengganti Elemen HTML



Ini adalah elemen lama

Penjelasan Kode

  • Kode HTML di atas memiliki sebuah elemen <h1> dengan ID oldElement.
  • Fungsi replaceElement() dijalankan ketika tombol "Ganti Elemen" diklik.
  • Fungsi tersebut mendapatkan referensi ke elemen <h1> menggunakan getElementById('oldElement').
  • Kemudian, fungsi tersebut membuat elemen p baru dengan teks "Ini adalah elemen baru!"
  • Akhirnya, fungsi tersebut mengganti elemen <h1> dengan elemen p baru menggunakan replaceWith().

Catatan

  • Anda dapat menggunakan metode yang sama untuk mengganti elemen HTML apa pun, tidak hanya elemen <h1>.
  • Anda juga dapat menggunakan metode appendChild() untuk menambahkan elemen baru sebagai anak dari elemen lain, alih-alih mengganti elemen yang ada.

Kesimpulan

Mengganti elemen HTML dengan JavaScript adalah teknik yang powerful untuk mengubah tampilan situs web secara dinamis. Dengan memahami cara menggunakan metode replaceWith(), Anda dapat membuat situs web yang lebih interaktif dan responsif.