jQuery’de .append() .prepend() .after() .before() Metotları

jQuery .append() metodu belirli bir elementin etiket bitiminden hemen öncesine “HTML ya da metinsel” ifadeler yazmanıza olanak sağlayan jQuery metodudur.

<div class="container"> <div class="inner"> Ürün Fiyatı :  </div> </div>

Örneğin burada görmüş olduğumuz kod dizesinde inner sınıfına sahip div’in içerisine ürünün fiyatını eklemek durumunda olalım bunun için yapmamız gereken şey .append() komutunu kullanarak inner sınıfına sahip div’in etiketinin kapanmadan hemen önce bu fiyatı eklemesini sağlamak.

$(document).ready(function(){
  $('.inner').append('25 TL');
});

Burada yaptığımız şey tam olarak bizlere istediğimiz sonucu vermeyebilir. Zira fiyat dediğimiz şey değişken olabilir bu yüzden html ifade girmemiz gerekebilir. Şimdiki aşamada ise append metodunu html etiketleri ile birlikte kullanalım. ve burada para birimi ve ücret şeklinde sınıflandırmalar yapalım. Burada prompt fonksiyonu ile kullanıcıdan ürün fiyatını girmesini istiyoruz. daha sonra parseInt fonksiyonu ile de girilen verinin bir integer yani tam sayı veri tipine dönüşmesini sağlıyoruz. daha sonra bunu urunFiyati adında bir değişkene atayıp inner sınıfına sahip olan div’e append metodu ile html içeriğimizi ekliyor ve de tırnaklar arasında + işareti kullanarak arada değişkenimizi kullanabiliyoruz. Böylelikle girilen fiyatı kullanıcı belirlemiş oluyor ve etkileşimi sağlıyor.

$(document).ready(function(){
  var urunFiyati = parseInt(prompt('ürün fiyatını giriniz'));
  $('.inner').append('<span class="fiyat">' + urunFiyati + '</span>'+'<span class="para-birimi">TL</span>');
});

İşte append komutunun genel olarak kullanımı bu şekilde. Unutmamanız gereken şey ise; etiket bitiminden hemen önce yerleştirilir bu komut ile eklenmesini istediğiniz şey. Yani örnek verecek olursak üstteki html etiketlerinde inner sınıfı değil de container sınıfını seçecek olursak ürün fiyatına değil container adlı div’in bitimindeki </div>den hemen önce ama inner etiketinin bitiminden hemen sonra ekleyecektir.

.prepend() metodu ise append’in tam tersidir. Yani bir referans olarak aldığınız elementin etiketinin açıldığı andan itibaren eklemeyi gerçekleştirir. ve var olan içerik eklediğiniz şeyin sonrasında gelecektir.

.after() metodu ise belirlediğiniz elementin hemen sonrasında eklemeler gerçekleştirir.

.before() metodu ise belirlediğiniz elementin hemen öncesine eklemeler gerçekleştirir.