jQuery Append & Prepend Kullanımı

Merhaba Arkadaşlar,

Bu makale de sizlere jQuery’ nin birbirine çok benzeyen iki metodu olan Append ve Prepend’ den bahsedeceğim. Genelde form işlemlerinin sonuçlarına göre bilgi amaçlı kullandığımız ( örn; geçersiz e-posta adresi girdiniz ) bu 2 metot, farklı alanlarda da direkt olarak html kod yapısı içerisine paragraflar, bilgi veren yazılar, resimler ekleyebilme olanağı sağlamaktadırlar. Yani daha anlaşılır bir ifade ile kod yapısına dışarıdan müdahale ederek eklemek istediklerimizi bir işlem sonucunda veya direkt olarak ekleyebilmemizi sağlamaktadırlar.

İkisinin arasındaki en temel farkı birisinin ekleme işlemini en üste ve diğerinin de en alta yaptığını söyleyerek açıklayabilirim. Daha detaya indirerek ve örneklendirerek anlatma kısmını da alt tarafta birlikte gerçekleştirelim :

Append() : jQuery’ de kullanacağımız bu metod ile bir div içerisine entegre edebileceğimiz alan, div’ in kapandığı tag’ in hemen bir üst satırına eklenir. Yani belirtilen div’ in içerisinde olabilecek en son alana konumlanır. Örneklendirme ile anlatmak gerekirse şu şekilde bir html kod yapısındaki değişimi hep birlikte görelim :

<section id="sec1">
    <p>Varolan Birinci Paragraf</p>
    <p>Varolan İkinci Paragraf</p>
</section>

Bu yapıda gerçekleştireceğimiz işlem sonucunda ID’ si ” sec1 ” olan section’ ın içerisine yeni bir paragraf eklemiş olacağız ve bu yeni eklenen paragraf sec1 isimli section’ ın en altında yer alacak.

Müdahale ederek işlem yaptıracağımız jQuery kodu şu şekildedir :

$("#sec1").append("<p>Yeni Eklenen Paragraf</p>");

Tarayıcı vasıtası ile çalıştırarak doğru sonucu aldıysanız başka bir işleme geçebiliriz. Append’ in içerisinde iki farklı kullanım şekli bulunmaktadır. Birincisi yukarıda kullanıldığı gibidir. Bu işlemi yorumladığımızda ” sec1 ” ID’ sine sahip olan alanın içerisine ” Yeni Eklenen Paragraf ” yazılı bir paragraf ekle demiş oluyoruz. İkinci kullanım şeklinde ise yeni bir section oluşturuyoruz ve yorumladığımızda ” Yeni Eklenen Paragraf ” yazılı paragrafı ” sec2 ” ID’ sine sahip alanın içerisine ekle demiş oluyoruz. Kullanırkende ” Append() ” yerine ” AppendTo() ” kullanıyoruz. Bunun için yapacağımız örnekte şu şekilde olacaktır :

<section id="sec2">
   <p>Varolan Birinci Paragraf</p>
   <p>Varolan İkinci Paragraf</p>
</section>

$("<p>Yeni Eklenen Paragraf</p>").appendTo("#sec2");

Tarayıcı görüntüsünü aldığımızda Append ile aynı işlemi yaptığını görüyoruz ve kullanım şekillerini ve ne amaç ile kullanıldıklarını tamamen kavramış oluyoruz. Artık makalemizin ikinci maddesine geçebiliriz.

Prepend() : Append’ den farklı olarak bu metod ile yapacağımız işlem sonucunda ekleyeceğimiz paragraf en sona değil en başa gelecektir. Yeni bir section oluşturuyoruz ve şu şekilde kodluyoruz :

<section id="sec3">
   <p>Varolan Birinci Paragraf</p>
   <p>Varolan İkinci Paragraf</p>
</section>

Etki edecek prepend komutunun kullanımı :

$("#sec3").prepend("<p>Yeni Eklenen Paragraf</p>");

Tarayıcı eşliğinde testlerimizi yapıp doğru çalıştığını görüyoruz ve aynı Append’ de olduğu gibi bunda da tam tersi bir işlem olarak PrependTo kullanıldığını bilmemiz gerekiyor. Yorumlanma şeklide aynı biçimde olan bu özelliği de yeni bir section içerisinde uygulayarak makalemizde yapmamız gereken tüm örnekleri yapmış oluyoruz :

<section id="sec4">
    <p>Varolan Birinci Paragraf</p>
    <p>Varolan İkinci Paragraf</p>
</section>

$("<p>Yeni Eklenen Paragraf</p>").prependTo("#sec4");

Bu işlemi de test edip onayladıktan sonra sıra makalemizi sonlandırmaya geliyor. Kullandığımız 2 ana ve 2 alt metot ile toplamda 4 örnek yaptık. Bu örnekler sayesinde html kod yapısını ellemeden farklı bir dosyadan nasıl eklemeler yapabileceğimizi görmüş olduk. Küçükte bir hatırlatma ile makalemiz burada son bulsun. Aynı class’ a vb. seçicilere sahip alanların bulunduğu sayfalarda varolan div sonlanana kadar append ve prepend işlemleri devam edeceklerdir.

İyi Çalışmalar 🙂

Not : Bu ders içeriğinde kullanılan dosyaları İndir Sayfası 46 No ‘lu Maddeden İndirebilirsiniz..