Add Element To Document Javascript

MUAZHAN

4 min read

·

Jun 22, 2024

34

Share

Menambahkan Elemen ke Dokumen dengan JavaScript

JavaScript menyediakan cara yang mudah untuk menambahkan elemen HTML ke dalam dokumen. Hal ini memungkinkan kamu untuk secara dinamis mengubah konten halaman web tanpa memuat ulang halaman. Berikut adalah beberapa metode umum untuk menambahkan elemen:

1. Menggunakan createElement() dan appendChild()

Metode ini adalah cara yang paling umum untuk menambahkan elemen ke dokumen. Pertama, kamu membuat elemen baru menggunakan document.createElement(), lalu menambahkannya ke dalam dokumen dengan menggunakan appendChild().

Contoh:

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

// Mengatur teks elemen paragraf
paragraph.textContent = 'Ini adalah paragraf baru!';

// Mendapatkan elemen div dengan id "container"
const container = document.getElementById('container');

// Menambahkan elemen paragraf ke dalam elemen div
container.appendChild(paragraph);

2. Menggunakan innerHTML

Kamu bisa menggunakan innerHTML untuk menambahkan elemen HTML baru langsung ke dalam elemen yang sudah ada.

Contoh:

// Mendapatkan elemen div dengan id "container"
const container = document.getElementById('container');

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

3. Menggunakan insertAdjacentHTML()

Metode ini memungkinkan kamu untuk menambahkan elemen HTML baru ke posisi tertentu di dalam elemen yang sudah ada.

Contoh:

// Mendapatkan elemen div dengan id "container"
const container = document.getElementById('container');

// Menambahkan elemen HTML baru sebelum elemen div
container.insertAdjacentHTML('beforebegin', '
Ini adalah paragraf sebelum elemen div.
');

4. Menggunakan insertBefore()

Metode ini mirip dengan appendChild(), tetapi memungkinkan kamu untuk menambahkan elemen baru di posisi tertentu dalam elemen yang sudah ada.

Contoh:

// Membuat elemen paragraf baru
const paragraph = document.createElement('p');
paragraph.textContent = 'Ini adalah paragraf baru!';

// Mendapatkan elemen div dengan id "container"
const container = document.getElementById('container');

// Mendapatkan elemen pertama di dalam elemen div
const firstElement = container.firstChild;

// Menambahkan elemen paragraf sebelum elemen pertama
container.insertBefore(paragraph, firstElement);

Tips Tambahan:

• Selalu gunakan document.createElement() untuk membuat elemen HTML baru. Jangan menambahkan elemen secara langsung ke dalam HTML dengan menggunakan string.
• Gunakan textContent untuk menetapkan teks ke elemen baru. Ini lebih aman dan efisien daripada menggunakan innerHTML untuk menambahkan teks.
• Perhatikan posisi elemen baru di dalam dokumen. Gunakan metode yang sesuai untuk menambahkan elemen ke posisi yang kamu inginkan.

Dengan menggunakan metode-metode di atas, kamu dapat menambahkan elemen ke dalam dokumen JavaScript dengan mudah dan fleksibel. Hal ini memungkinkan kamu untuk membuat halaman web yang dinamis dan interaktif.