Aycan.net

.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.

<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.

$(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 ;

$(document).ready(function(){ .. }

Sayda yüklendiğinde

$('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.

$('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.

$('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 ?

$('<htmlTagi>Eklenecek icerik</htmlTagi>').appendTo('eklenecek nesne ')

Yani mantık kurarsak “Şunu” , “Şunun sonuna ekle” gibi bir mantığa ulaşıyoruz.

Html kodumuz ;

<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 ;

$(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.

 $('<b> var!</b>').appendTo('div.cerceve h1'); 

H1 tagının içine ‘Var!’ diye text yazdırıyoruz.

 $('<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.