MEMBUAT ELEMEN BARU - DOM

Membuat sebuah elemen baru di dalam Document Object Model (DOM) adalah salah satu konsep penting dalam pemrograman JavaScript. Ini memungkinkan kamu untuk dinamis menambahkan, memodifikasi, atau menghapus elemen HTML dalam sebuah halaman web.

Langkah 1: Membuat Elemen Baru

Untuk membuat elemen baru, kamu dapat menggunakan metode createElement(). Metode ini akan menghasilkan sebuah objek elemen yang baru.

Snippet kode di bawah ini menunjukkan bagaimana kamu bisa membuat elemen baru berupa elemen <p>:

var p = document.createElement('p');

Setelah elemen berhasil dibuat, kamu perlu menambahkan elemen tersebut ke dalam DOM.

Langkah 2: Membuat Konten Elemen

Sebelum kamu menambahkan elemen ke dalam DOM, kamu bisa menetapkan konten untuk elemen tersebut. Untuk elemen tipe teks seperti <p>, kamu bisa menggunakan properti innerText atau innerHTML.

p.innerText = 'Ini adalah paragraf baru';

Langkah 3: Menambahkan Elemen ke DOM

Menambahkan elemen ke DOM bisa dicapai dengan metode appendChild(). Metode ini menambahkan elemen sebagai anak terakhir dari elemen parent.

Untuk menambahkan elemen p yang baru dibuat ke dalam elemen body, kamu bisa melakukan seperti berikut:

document.body.appendChild(p);

Di sini, body berfungsi sebagai parent elemen p, dan p akan menjadi anak terakhir elemen body.

Menambahkan Elemen ke Posisi Tertentu

Kadang-kadang, kamu mungkin ingin menambahkan elemen ke posisi tertentu dalam DOM, bukan hanya sebagai anak terakhir. JavaScript menyediakan metode insertBefore(), yang memungkinkan kamu untuk menentukan posisi elemen baru ini.

var div = document.createElement('div');
document.body.insertBefore(div, p);

Kode di atas menciptakan elemen div baru dan memasukkannya sebelum elemen p.

Dengan penguasaan metode dan pendekatan untuk membuat dan menambahkan elemen baru dalam DOM, kamu dapat memanipulasi halaman web dengan lebih fleksibel dan dinamis menggunakan JavaScript.