jQuery .append() Metodu

Bu jQuery makalemizde hedef olarak belirlediğimiz bir nesneye ekleme yapmak için kullanacağımız append() metodunu kullanacağız.

Yaptığınız bir işlem sonucunda bir div, p, span, ul vs.. gibi html elementlerinin içerisine sonradan ekleyeceğimiz değerler için kullanabileceğimiz jQuery metodudur. Kısaca ne işe yaradığına değindikten sonra kullanım şekline ve örneklerine değinelim.
Kullanım Şekli
jQuery("seçilen hedef").append("eklenecek olan veriler");

Kullanım şeklinden sonra da birkaç örnek ile bu metodu daha iyi pekiştirelim.
Birinci örneğimizde butona tıklandığında hedefteki div elementinin içerisine yazılar yazacağız.
Örnek 1 (jQuery Betikleri)
$(document).ready(function () {
   $(".tiklanan-buton").click(function () {
      $(".etkilenen-nesne").append("Merhaba, butona tıklandıktan sonra bu yazı ilgili hedefe eklendi");
   });
});

Örnek 1 (HTML Betikleri)
<buton class="tiklanan-buton">Tıkla</buton>
<div class="etkilenen-nesne">Burası değişecek</div>
Örnek 1 (Test Ekranı)
Tıkla
Burası değişecek

İkinci örneğimizde ise bir p elementinin üzerine gelince aynı p elementinin içerisine span elementini ekleyelim.
Not: Bir olay sonucunda etkilenmesini istediğimiz nesnenin kendisi olmasını istiyorsak bunu this deyimi ile belirtebiliriz.
Örnek 2 (jQuery Betikleri)
$(document).ready(function () {
   $(".uzerine-gelinen-element").hover(function () {
      $(this).append("<span class='span-element'>Merhaba, p elementinin üzerine gelince hedefe eklendi</span>");
   });
});

Örnek 2 (HTML Betikleri)
<p class="uzerine-gelinen-element">Burası değişecek</p>
Örnek 2 (Test Ekranı)

Burası değişecek

Yorumlar

Henüz hiçbir yorum yazılmamış. İlk yorumu siz yapın.

Yorum Yaz

Avatar

REKLAM

DDos Koruma, Botnet Koruma, Layer 7 Saldırı koruması, Sanal sunucu, Vds sunucu

REKLAM

Çizgi Filmler

EN

  • Popüler
  • Yeni
  • Son Yorum