Add Element Html Javascript

MUAZHAN

4 min read

·

Jun 22, 2024

27

Share

Menambahkan Elemen HTML dengan JavaScript

JavaScript memberikan kemampuan dinamis yang luar biasa pada halaman web. Salah satu kemampuannya yang paling berguna adalah kemampuan untuk memanipulasi struktur HTML halaman, termasuk menambahkan elemen HTML baru.

Cara Menambahkan Elemen HTML

Berikut adalah beberapa cara untuk menambahkan elemen HTML baru menggunakan JavaScript:

1. Menggunakan createElement() dan appendChild():

• createElement(): Fungsi ini menciptakan elemen HTML baru dengan jenis yang ditentukan.
• appendChild(): Fungsi ini menambahkan elemen yang baru dibuat ke dalam elemen induk yang telah ada.

// Membuat elemen paragraf baru
const newParagraph = document.createElement('p');

// Menambahkan teks ke dalam paragraf
newParagraph.textContent = 'Ini adalah paragraf baru!';

// Mencari elemen container yang akan menampung paragraf baru
const container = document.getElementById('myContainer');

// Menambahkan paragraf baru ke dalam container
container.appendChild(newParagraph);

2. Menggunakan innerHTML:

• innerHTML: Properti ini memungkinkan Anda untuk mengubah konten HTML dari suatu elemen. Anda dapat menggunakannya untuk menambahkan elemen baru secara langsung ke dalam elemen induk.

// Mencari elemen container
const container = document.getElementById('myContainer');

// Menambahkan elemen baru ke dalam container
container.innerHTML += '
Ini adalah paragraf baru!
';

3. Menggunakan insertAdjacentHTML():

• insertAdjacentHTML(): Fungsi ini memungkinkan Anda untuk menyisipkan HTML baru di sebelah elemen yang ada. Anda dapat menentukan posisi relatif elemen baru dengan menggunakan parameter position.

// Mencari elemen container
const container = document.getElementById('myContainer');

// Menyisipkan elemen baru di sebelah elemen container
container.insertAdjacentHTML('beforeend', '
Ini adalah paragraf baru!
');

Keuntungan Menggunakan JavaScript untuk Menambahkan Elemen HTML

• Dinamisme: JavaScript memungkinkan Anda untuk menambahkan elemen HTML baru secara dinamis, berdasarkan tindakan pengguna atau data yang diperoleh.
• Kontrol: Anda memiliki kontrol penuh atas struktur dan konten elemen yang ditambahkan.
• Efisiensi: Anda dapat menambahkan banyak elemen dengan mudah, meningkatkan efisiensi dalam proses pengembangan.

Contoh Penggunaan

Berikut adalah contoh sederhana yang menunjukkan bagaimana menambahkan elemen baru ke dalam sebuah tabel HTML:

  

    

      
Nama
      
Data
    
  
  Tambahkan Baris

Contoh ini menunjukkan cara menambahkan baris baru ke dalam tabel dengan memanggil fungsi addRow() saat tombol "Tambahkan Baris" diklik.

Penjelasan Lebih Lanjut

Untuk pemahaman lebih mendalam tentang cara memanipulasi elemen HTML dengan JavaScript, Anda dapat mempelajari lebih lanjut tentang DOM (Document Object Model). DOM adalah representasi struktural dari halaman web, dan JavaScript memungkinkan Anda untuk mengakses dan memanipulasi struktur tersebut.

Dengan kemampuan menambahkan elemen HTML secara dinamis, JavaScript memungkinkan Anda untuk membangun halaman web yang lebih interaktif dan menarik.