Add Span Element To Div Javascript

MUAZHAN

3 min read

·

Jun 22, 2024

34

Share

Cara Menambahkan Elemen Span ke dalam Div dengan JavaScript

Dalam artikel ini, kita akan membahas cara menambahkan elemen span ke dalam div menggunakan JavaScript. Ini adalah teknik umum untuk memanipulasi konten HTML secara dinamis, yang memungkinkan Anda untuk mengubah tampilan dan perilaku halaman web.

1. Menggunakan createElement() dan appendChild()

Metode ini adalah cara paling dasar untuk menambahkan elemen ke dalam DOM. Berikut langkah-langkahnya:

1. Buat Elemen Span:

   const spanElement = document.createElement('span');
   

2. Tentukan Konten Span:

   spanElement.textContent = "Ini adalah teks dalam span";
   

3. Temukan Div Target:

   const targetDiv = document.getElementById('myDiv'); 
   

4. Tambahkan Span ke Div:

   targetDiv.appendChild(spanElement);
   

Contoh Lengkap:

  



  

    Teks dalam div
  

  

2. Menggunakan innerHTML

Anda juga dapat menambahkan elemen span dengan menggunakan innerHTML dari div target.

Contoh:

  



  

    Teks dalam div
  

  

Catatan:

• Gunakan innerHTML dengan hati-hati karena dapat berdampak negatif pada kinerja jika digunakan secara berlebihan.
• Pastikan kode HTML yang Anda tambahkan valid untuk menghindari kesalahan.

3. Menggunakan insertAdjacentHTML()

Metode ini memungkinkan Anda untuk menambahkan elemen span pada posisi tertentu dalam div target.

Contoh:

  



  

    Teks dalam div
  

  

Catatan:

• Argumen pertama dari insertAdjacentHTML menentukan posisi elemen baru:
  • beforebegin: sebelum elemen target
  • afterbegin: di awal elemen target
  • beforeend: sebelum akhir elemen target
  • afterend: setelah elemen target

Kesimpulan

Dengan menggunakan teknik di atas, Anda dapat dengan mudah menambahkan elemen span ke dalam div menggunakan JavaScript. Pilih metode yang paling sesuai dengan kebutuhan Anda, dan pastikan untuk memahami potensi dampaknya pada kinerja dan keamanan aplikasi web Anda.