Add Text Node To Div Javascript

MUAZHAN

3 min read

·

Jun 22, 2024

31

Share

Menambahkan Node Teks ke Div dengan JavaScript

Dalam pengembangan web dengan JavaScript, seringkali kita perlu memanipulasi konten HTML secara dinamis. Salah satu cara untuk melakukan hal ini adalah dengan menambahkan node teks ke dalam elemen HTML, seperti div.

Cara Menambahkan Node Teks ke Div

Berikut adalah langkah-langkah untuk menambahkan node teks ke div menggunakan JavaScript:

1. Dapatkan Referensi Elemen Div: Gunakan metode getElementById() untuk mendapatkan referensi ke elemen div Anda.

   const myDiv = document.getElementById("myDiv"); 
   

2. Buat Node Teks: Gunakan metode createTextNode() untuk membuat objek node teks baru.

   const textNode = document.createTextNode("Ini adalah teks yang akan ditambahkan.");
   

3. Tambahkan Node Teks ke Div: Gunakan metode appendChild() untuk menambahkan node teks yang baru dibuat ke dalam elemen div.

   myDiv.appendChild(textNode);
   

Contoh Lengkap

Berikut adalah contoh kode lengkap untuk menambahkan node teks ke dalam div:

  


  

    Ini adalah teks awal di dalam div.
  

  

Kode di atas akan menambahkan teks "Ini adalah teks yang ditambahkan." di akhir teks yang sudah ada di dalam div dengan ID "myDiv".

Catatan

• Anda dapat menambahkan node teks ke dalam div di mana saja, baik di awal, di akhir, atau di tengah konten yang sudah ada.
• Anda juga dapat menggunakan metode insertBefore() untuk menambahkan node teks di posisi tertentu dalam div.

Dengan memahami cara menambahkan node teks ke dalam div, Anda dapat dengan mudah memanipulasi konten HTML secara dinamis dan membuat aplikasi web yang lebih interaktif.