jQuery ile DOM Nesnelerine Ekleme Yapmak

 

 

Arkadaş bu dersimizde jQuery ile nesnelerin başına ve sonuna nasıl içerik yada nesne ekleriz onu göreceğiz. Hemen dersimize geçelim.

.append()

.appendTo()

.prepend()

.prependTo()

.after()

.before()

.insertAfter()

.insertBefore()

 

 

.append() -> Seçtiğimiz nesnenin sonuna yeni bir içerik yada nesne eklememizi sağlar.

 

Burda ul nesnesinin sonuna bir li nesnesi ekledik. Ama dikat edin ul den sonra eklemiyor, yine eklediğimiz içerik ul içinde kalıyor fakat ul nin sonuna ekleniyor.

 

.appendTo() -> Seçtiğimiz nesneyi girilen nesnenin sonuna ekler.

Burada önce ekleyeceğimiz nesneyi seçiyoruz ve hangi nesnenin sonuna ekleyeceksek o nesneyi appendTo içine giriyoruz.

 

<li>asd</li> içeriğini seçtik ve appendTo ile ul nin sonuna ekledik.

 

.prepend-> append’in tam tersidir. İçeriği nesnenin başına ekler.

 

.prependTo -> appendTo’nun tam tersidir. İçeriği nesnenin başına ekler.

 

* Sıradaki metodlara geçmeden önce append ve prepend’in içeriği seçilen nesnenin içine eklediğini hatırlatmak isterim. Yani bi  <ul> nesnesini seçip append metoduyla içerik eklersek bu içerik <ul> nesnesi içinde kalacaktır.

 

.after () -> Seçtiğimiz nesneden sonra içerik ekler.

append metodundaki örneği kullanalım.

 

Burada ul içerisindeki son li den sonra yeni bir içerik ekledik. Eğer append da olduğu gibi sadece ul nesnesini seçmişolsaydık içeriğimiz ul den sonra eklenecekti yani ul dışına yeni bir içerik eklemiş olacaktık.

 

.before() -> after() metodunun tam tersidir. Seçtiğimiz nesneden önce içerik ekler.

.insertAfter() -> after() metoduyla aynı görevi yapar.
Farkı şöyle açıklayabiliriz. insertAfter seçtiğimiz nesneyi insertAfter içindeki nesneden sonra ekler,
After ise seçtğimiz nesneden sonra After içindeki nesneyi ekler.

 

Örnek;

Seçtiğimiz “<a href=”#”>Link</a>” nesnesini div’den sonra ekler.

 

Seçtiğimiz div’den sonra “<a href=”#”>Link</a>” nesnesini ekler.
Her iki şekilde de div den sonra “<a href=”#”>Link</a>” eklemiş olduk.

 

Her ikisinide kullanacağımız yerler olacaktır. Örnek vermek gerekirse.

 

div nesnesini klonladık ve insertAfter ile p’den sonra ekledik. Burada after kullanamazdık.

.insertBefore() -> before() metoduyla aynı görevi yapar. after ve insertAfter için anlattıklarım before ve insertBefore içinde geçerlidir.

Yorum Yapabilmek İçin Üye Girişi Yapmanız Gerekmektedir.

jquery ile dom nesnelerine ekleme yapmak