Beberapa contoh penggunaan fungsi insertBefore() pada JavaScript
Fungsi javascript prependChild(). Pada umumnya kata kunci ini sering dimasukkan ke mesin pencari dengan harapan dapat menemukan fungsi kebalikan dari appendChild() yang mengacu pada jQuery prepend(). Tetapi sayangnya fungsi prependChild() itu memang benar-benar tidak ada. Tapi jangan bersedih apalagi putus asa karena masih ada solusi lain yang dapat melakukan pekerjaan serupa yang dilakukan oleh prepend() yang ada di jQuery.
Dan fungsi tersebut bernama insertBefore(). Sepertinya jika dilihat dari namanya tidak ada sangkut pautnya dengan fungsi yang sedang kita perbincangkan kan? memang, fungi alami dari insertBefore() bukan hanya untuk menyisipkan elemen di awal, lebih dari itu insertBefore() juga dapat memindahkan elemen ke elemen lain dan sebagainya.
Sekarang mari kita membiasakan diri dengan argumen yang dimiliki oleh insertBefore()
Syntax:
node.insertBefore(newNode[, existingNode]);
Parameter Values:
Parameter | Tipe | Deskripsi |
---|---|---|
node | Node object | [Dibutuhkan] Menentukan objek yang akan diberi sisipan. |
newNode | Node object | [Dibutuhkan] Elemen yang akan kita sisipkan ke dalam objek lain. |
existingNode | Node object | [Opsional] Child node yang akan kita sisipkan elemen newNode. Jika tidak diisi, elemen akan disisipkan di akhir. |
Contoh penggunaan fungsi insertBefore() pada JavaScript
Menyisipkan Element Di Awal
var item= document.createElement('li'); var text= document.createTextNode('Merah'); item.appendChild(text); // menulis kata "Merah" di elemen "li" var list= document.getElementById('mylist'); list.insertBefore(item, list.childNodes[0]); // meletakkan elemen "li" di elemen anak dari "ul" yang pertama
<!-- sebelum diinsert --> <ul id="mylist"> <li>Hijau</li> <li>Biru</li> </ul> <!-- setelah diinsert --> <ul id="mylist"> <li>Merah</li> <li>Hijau</li> <li>Biru</li> </ul>
Contoh diatas merupakan penerapan fungsi insertBefore() yang sering digunakan.
Memindahkan Elemen Ke Elemen Lain
var item= document.getElementById('list-1').childNodes[0]; var list= document.getElementById('list-2'); list.insertBefore(item, list.childNodes[0]); // childNodes[0] bisa diganti firstChild ataupun lastChild
<!-- sebelum dipindahkan --> <ul id="list-1"> <li>Merah</li> <li>Biru</li> </ul> <ul id="list-2"> <li>Hijau</li> <li>Kuning</li> </ul> <!-- setelah dipindahkan --> <ul id="list-1"> <li>Biru</li> </ul> <ul id="list-2"> <li>Merah</li> <li>Hijau</li> <li>Kuning</li> </ul>
Dengan kode tersebut memungkinkan kita untuk memindahkan suatu elemen ke elemen lain dengan sangat mudah.
Membuat Elemen Baru Diluar Elemen Induk
var item= document.createElement('p'); var text= document.createTextNode('Paragraf baru'); item.appendChild(text); var elmn= document.getElementById('content'); elmn.parentNode.insertBefore(item, elmn);
<!-- paragraf awal --> <p id="content">Ini adalah paragraf</p> <!-- setelah disisipkan --> <p>Paragraf baru</p> <p id="content">Ini adalah paragraf</p>
Bedanya dari contoh pertama adalah jika di contoh ke-3 ini elemen yang kita buat akan disisipkan sebelum elemen target, dan bukan didalamnya. Sehingga kita tidak perlu menulis childNodes, firstChild, atau lastChild di argumen existingNode.
Yah kira-kira begitulah penjelasannya. Semoga dapat Anda pahami dan bermanfaat untuk kita semua. Sampai jumpa kembali di lain waktu dengan artikel-artikel menarik lainnya.