.append() nedir?
Append fonskiynonu belirtilen bir nesne üzerininin sonuna html tagı veya metin eklemeye yarar. (Detaylı bilgi jquery.com)
.append() nasıl kullanılır ?
Kodlarla örnek gösterecek olursak ufak bir html kodu oluşturuyoruz.
|
1 2 3 4 5 6 7 |
<div class="cerceve"> <h1>jQuery .append()</h1> <p class="metin"> Soru : jQuery append </p> </div> <!-- cerceve DIV Kapanış --> |
Şimdi ise bu html kodları üzerinde oynama append() fonksiyonu yapıyoruz.
|
1 2 3 4 5 6 7 |
$(document).ready(function () { $('div.cerceve h1').append(' ~ aycan.net'); $('div.cerceve p').append('<b>nedir? <br> Cevap : Ne bileyim ben arkadaş!</b>'); $('div.cerceve').append('<h1><a href="http://www.aycan.net/"><img src="http://www.aycan.net/wp-content/themes/headlines/images/logo.png" alt="aycan logo"/></a>'); }); |
Kodları tek tek açıklayacak olursak ;
|
1 |
$(document).ready(function(){ .. } |
Sayda yüklendiğinde
|
1 |
$('div.cerceve h1').append(' ~ aycan.net'); |
Class’ı cerceve olan div’in içerisindeki h1 tagının içine append komutu ile ‘ ~ aycan.net’ text değerini yazdırıyoruz.
|
1 |
$('div.cerceve p').append('<b>nedir? <br> Cevap : Ne bileyim ben arkadaş!</b>'); |
Class’ı cerceve olan div’in içerisindeki p tagının içine ‘<strong>nedir? <br> Cevap : Ne bileyim ben arkadaş!</strong>’ bu değerini yazdırıyoruz.
|
1 |
$('div.cerceve').append('<h1><a href="http://www.aycan.net/"><img src="http://www.aycan.net/wp-content/themes/headlines/images/logo.png" alt="aycan logo"/></a>'); |
ve birde reklam şart diyerek kendi logomuzu yeni bir h1 tagı > a tagı > img tagı bastırıyoruz.
Ön izleme;
Örnek : jQuery append uygulaması
.appendTo() nedir?
AppendTo fonskiyonu seçilen nesnenin sonuna bir html tagı olmak şartıyla bir nesne ekler. Deneme yanılma yönetimi ile bu sonuca vardım Html tag kullanmadan düz metin değerleri ekleme işleminde kullanmıyor. Ayrıca yazımıda biraz değişik.(Detaylı bilgi jquery.com)
.appendTo() nasıl kullanılır ?
|
1 |
$('<htmlTagi>Eklenecek icerik</htmlTagi>').appendTo('eklenecek nesne ') |
Yani mantık kurarsak “Şunu” , “Şunun sonuna ekle” gibi bir mantığa ulaşıyoruz.
Html kodumuz ;
|
1 2 3 4 5 |
<div class="cerceve"> <h1>jQuery .appendTo()'da değişik birşey </h1> <p class="metin">Hınk ?</p> </div> <!-- cerceve DIV Kapanış --> |
Js kodlarımız ;
|
1 2 3 4 5 6 7 |
$(document).ready(function(){ $('<b> var!</b>').appendTo('div.cerceve h1'); $('<p>Farketmedin mi ?</p>').appendTo('div.cerceve'); $('<p>İşleyişi farklı</p>').appendTo('div.cerceve'); }); |
Kodları tek tek açıklıyoruz.
|
1 |
$('<b> var!</b>').appendTo('div.cerceve h1'); |
H1 tagının içine ‘Var!’ diye text yazdırıyoruz.
|
1 |
$('<p>Farketmedin mi ?</p>').appendTo('div.cerceve'); |
Cerceve claslı div’in sonuna p tagı ekliyoruz ve bundan sonraki işlemde aynıdır.
Örnek : jQuery appendTo uygulaması
Ön izleme
append ve appendTo çalışmalarını buradan indirebilirsiniz.
Kullandım sitemde teşekkürler
Teşekkürler 2 gündür bu sorunu aşmaya çalışıyorum. Proje ödevim için çok iyi bir kaynak oldu.
Teşekkürler SÜPER siniz..
Merhaba Aycan Bülbül.Sitenizi uzun zamandır takip etmekteyim.Şöyle bir sorum olacak jquery ajax kullanarak phpden çektiğim veri sayısıkadar div etiketi oluşturmak istiyorum ve phpdeki id değerini bu divlerin class yada idsi olarak atamak istiyorum bunu sayfa yüklendiğinde olmuş olmasını istiyorum bu konuda yardımlarınızı bekliyorum günlerdir uğraşmaktayım hala çözüm bulamadım
teşekkürler yardımcı oldun.
bn hiç bişey anlamadim :))
Hocam nesnenin sonuna değilde başına eklemek istiyorsak. Neyi kullanmalıyız?
.prepend()
Ben ‘ in önüne eklemek istiyorum. Nasıl yapabilirim?
jQuery prepend ile.
Merhaba append prepend denedim ama başarılı olamadım.
bunu nasıl istediğim class’ı içeren div içine alabilirim.
append veya prepend de tek html tagını kabul etmiyor.
Lütfen kodlarınız renklendirin. Yazının okunabilirliği sıfır. Buradan hemen uzaklaşıyorum. Sonraki ziyaretimde daha okunabilir yazılar bulmayı umut ediyorum.
teşekkürler