By Request: Fungsi dan Kegunaan append() dan prepend() pada jquery

 Author : hadinug, 22 February, 2014, Komentar

Sebelum kita menggunakan fungsi append dan preppend pada jQuery, akan lebih baik jika kita tau maksud dan tujuan dari kedua fungsi tersebut.


Append

Menyisipkan sebuah konten, yang ditentukan oleh parameter, dimana konten tersebut ditambahkan diakhir setiap elemen dalam suatu rangkaian elemen yang cocok. 



Prepend

Menyisipkan sebuah konten, yang ditentukan oleh parameter, dimana konten tersebut ditambahkan diawal setiap elemen dalam suatu rangkaian elemen yang cocok. 


Contohnya saya punya sebuah elist dengan kode markup HTML berikut:


<ul>
    <li class="prepend" onclick="prepend(this);">prepend</li> 
    <li class="append" onclick="append(this);">append</li> 
</ul>


Kemudian pada script jQuery bisa di lakukan dengan 2 cara, yaitu dengan onclick atau dengan jQuery.each. Langsung saja kita lihat bagaimana efek fungsi append dan prepend bekerja, kita tambahkan kode berikut:


1. onclick


function prepend(i) {
  var num = $('ul').find('li.prepend').length;
  $(i).parent().prepend('<li class="prepend" onclick="prepend(this)">prepend' + num + '</li>');
}
function append(i) {
  var num = $('ul').find('li.append').length;
  $(i).parent().append('<li class="append" onclick="append(this)">append' + num + '</li>');
}


2. jQuery.each


$(document).ready(function() {
  $.each($('ul'), function() {
    $(this).find('li[class="prepend"]').click(function() {
	var num = $('ul').find('li.prepend').length;
	$(this).prepend('<li class="prepend">prepend' + num + '</li>');
    });
    $(this).find('li[class="append"]').click(function() {
        var num = $('ul').find('li.append').length;
	$(this).append('<li class="append">prepend' + num + '</li>');
    });
   });
});


Dengan kata lain, ketika list child append di klik maka satu elemen list dengan class append akan ditambahkan pada akhir rangkaian list. Sedangkan pada list child prepend ketika di klik, maka satu elemen list dengan class prepend akan ditambahkan diawal rangkaian list.


Link demonya bisa dilihat disini. semoga bermanfaat, jika ada yang perlu ditanyakan silahkan di diskusikan di halaman komentar :-)


Note: Jika ada pertanyaan lain silahkan kirimkan pertanyaan anda dan lihat ketentuan bertanya di hadinug.net



 
Bagikan halaman ke sosial media
 
Tags :   jquery    request       

Tentang Penulis

writer hadinug
Web Developer di PT. Yafii Solusi Internasional

Link: http://ysi.co.id

   Komentar Anda