Add Element To Html Document Javascript

MUAZHAN

4 min read

·

Jun 22, 2024

39

Share

Menambahkan Elemen ke Dokumen HTML dengan JavaScript

JavaScript memungkinkan kita untuk memanipulasi struktur HTML dokumen secara dinamis. Salah satu kemampuan penting adalah menambahkan elemen baru ke dokumen HTML. Ini membuka berbagai kemungkinan untuk membangun aplikasi web yang lebih interaktif dan dinamis.

Cara Menambahkan Elemen Baru

Berikut adalah beberapa metode umum untuk menambahkan elemen baru ke dokumen HTML menggunakan JavaScript:

1. createElement() dan appendChild()

• createElement() digunakan untuk membuat elemen HTML baru.
• appendChild() digunakan untuk menambahkan elemen baru sebagai anak dari elemen yang ada.

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

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

// Mendapatkan referensi ke elemen 
 yang ada
const myDiv = document.getElementById("myDiv");

// Menambahkan paragraf baru sebagai anak dari 

myDiv.appendChild(newParagraph);

2. insertAdjacentHTML()

Metode ini memungkinkan Anda untuk menyisipkan HTML baru di berbagai posisi relatif terhadap elemen yang ada.

// Mendapatkan referensi ke elemen 
 yang ada
const myDiv = document.getElementById("myDiv");

// Menyisipkan HTML baru sebelum elemen 

myDiv.insertAdjacentHTML("beforebegin", "
Teks sebelum 
");

// Menyisipkan HTML baru setelah elemen 

myDiv.insertAdjacentHTML("afterend", "
Teks setelah 
");

3. innerHTML

Metode ini memungkinkan Anda untuk menetapkan atau mendapatkan HTML konten dari elemen yang ada.

// Mendapatkan referensi ke elemen 
 yang ada
const myDiv = document.getElementById("myDiv");

// Menambahkan HTML baru ke dalam konten 

myDiv.innerHTML += "
Paragraf baru
"; 

Contoh Praktis

  



  

    
Ini adalah paragraf awal.
  

  Tambahkan Paragraf

  

Contoh di atas akan menampilkan:

• Sebuah paragraf awal di dalam div dengan id "myDiv".
• Sebuah tombol dengan teks "Tambahkan Paragraf".
• Ketika tombol diklik, fungsi addNewParagraph() akan menambahkan paragraf baru dengan teks "Paragraf baru ditambahkan!" ke dalam div "myDiv".

Kesimpulan

Menambahkan elemen HTML secara dinamis dengan JavaScript merupakan teknik penting untuk membuat aplikasi web yang interaktif. Dengan menggunakan metode seperti createElement(), appendChild(), insertAdjacentHTML(), dan innerHTML, Anda dapat memanipulasi struktur dokumen HTML dan membangun antarmuka pengguna yang dinamis dan menarik.