Fungsi prepend() dalam Javascript

Fungsi prepend() ini berguna untuk menambahkan sebuah element di dalam element induk tanpa menghaspus element anak lainya yang berada di dalam element induk.



Contoh kasus saya ingin menambahkan elemen DIV di dalam sebuah element div induk dengan id='idInduk'. Codenya seperti berikut :

<div id='idInduk'>
<!-- Saya ingin menambahkan element DIV disini -->
<div id='idAnak1'></div>
<div id='idAnak2'></div>
<div id='idAnak2'></div>
</div>

Dari code di atas, saya ingin menambahkan sebuah element DIV pada tulisan yang saya beri warna merah. Tetapi saya tidak ingin menghapus element DIV dibawahnya.

Nah, kita dapat menggunakan sebuah fungsi prepend() sebagai berikut :

<script>
var elementInduk = document.getElementById('idInduk');
var tambahElement = document.createElement('div');

elementInduk.prepend(tambahElement);
</script>

 Nah, bagaimana untuk menambah properti seperti ID, CLASS dan properti lain di dalam element yang sudah di buat barusan. Caranya yaitu kamu harus mendeklarasikan fungsi propertinya terlebih dahulu sebelum di eksekusi oleh prepend(). Jadi codenya seperti berkut :

<script>
var elementInduk = document.getElementById('idInduk');
var tambahElement = document.createElement('div');

tambahElement.id = 'idAnak0';
tambahElement.className = 'classIdAnak';
tambahElement.innerHTML = 'Hai';

elementInduk.prepend(tambahElement);
</script>

Jika code di atas dijalankan maka akan dihasilkan sebuah DOM HTML sebagai berikut :

<div id='idInduk'>
<div id='idAnak0' class='classIdAnak'>Hai</div>
<div id='idAnak1'></div>
<div id='idAnak2'></div>
<div id='idAnak2'></div>
</div>

Terlihat bahwa fungsi ini berbeda degan fungsi innerHTML yang akan menghapus seluruh isi element anak tersebut lalu menggantinya dengan element anak baru.

Mungkin ini saja yang bisa saya berikan. Jika ada yang ingin ditanyakan silahkan berkomentar di bawah.
Terimakasih sudah berkunjung.