XtGem Forum catalog
Home » Article » Javascript » Fungsi Javascript Prependchild()

Fungsi JavaScript prependChild()

f_huda19   29 Mei 2015   15:19:01   0 Suka   Favorit

Beberapa contoh penggunaan fungsi insertBefore() pada JavaScript


javascript prependChild() function, javascript insertBefore() function

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:

ParameterTipeDeskripsi
nodeNode object[Dibutuhkan] Menentukan objek yang akan diberi sisipan.
newNodeNode object[Dibutuhkan] Elemen yang akan kita sisipkan ke dalam objek lain.
existingNodeNode 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.

KOMENTAR

Qategori

Qategori 30 May 15

Gan ajarin pasang css donk

f_huda19

Admin 30 May 15

tinggal edit dibagian global stylesheet.css dan di xgem template.css gan

Sytrick

Sytrick 01 Jun 15

Wih terima kasih gan buat informasinya... dan pelajarannya.....

f_huda19

Admin 01 Jun 15

iya.. masama gan..