.after()

.after(içerik [,içerik]) Dönen Değer : jQuery Nesnesi
Açıklama : Parametrede verilen içeriği seçilen eleman(lar)ın her birine ekler.

.after(içerik [,içerik])
içerik
Tip : html string veya eleman veya yazı veya array veya jQuery nesnesi.
String olarak HTML kodu, DOM elemanı, bir yazı, yazılardan ya da elemanlardan bir array ya da jQuery nesnesi seçilen elemanların her birine eklenir.
içerik
Tip : html string veya eleman veya yazı veya array veya jQuery nesnesi.
Üstteki ile aynı şekilde eklenecek olan bir ya da birden fazla içerik virgül ile ayrılmış parametreler olarak verilebilir.
.after(fonksiyon)
fonksiyon
Tip : Function( Integer index )
=> htmlString veya Eleman vaya Yazı veya jQuery nesnesi

String olarak HTML kodu, DOM elemanı, bir yazı, yazılardan ya da elemanlardan bir array ya da jQuery nesnesi dönecek bir fonksiyon. Bu fonksiyon seçilen elemanların her birine uygulanır ve dönen değer o elemana eklenir. index değeri o sıradaki elemanın set içindeki index'idir. Fonksiyon içinde this kelimesi, o andaki elemanı verir.
.after(fonksiyon-html)
fonksiyon-html
Tip : Function( Integer index, String html )
=> htmlString veya Eleman vaya Yazı veya jQuery nesnesi

String olarak HTML kodu, DOM elemanı, bir yazı, yazılardan ya da elemanlardan bir array ya da jQuery nesnesi dönecek bir fonksiyon. Bu fonksiyon seçilen elemanların her birine uygulanır ve dönen değer o elemana eklenir. index değeri o sıradaki elemanın set içindeki index'idir ve html değeri o sıradaki elemanın html değrinin string halidir. Fonksiyon içinde this kelimesi, o andaki elemanı verir.

.after() ve insertAfter() metodu aynı görevi yapar. Ana fark deyimin kullanılış şeklindedir. .after() kullanırken seçili olan elemanlara parametrede verilen içerik eklenirken , insertAfter() metodunda seçili olan elemanlar parametrede verilen elemana eklenir.

Aşağıdaki HTML içeriği kullanalım :

<div class="container">
    <h2>Selamlaşma</h2>
    <div class="inner">Merhaba</div>
    <div class="inner">Hoşçakal</div>
</div>

Bir içerik üretip bunu bir set elemanın her birine ekleyebiliriz.

$( ".inner" ).after( "<p>Test</p>" );

Her <div> elemanı arkasına yeni bir içerik gelir. Sonuç HTML şöyle olur:

<div class="container">
    <h2>Selamlaşma</h2>
    <div class="inner">Merhaba</div>
    <p>Test</p>
    <div class="inner">Hoşçakal</div>
    <p>Test</p>
</div>

DOM içindeki mevcut elemanlardan biri de seçilip başka bir elemanın arkasına eklenebilir.

$( ".container" ).after( $( "h2" ) );

Eğer arkasına eklenecek tek bir eleman seçildiyse DOM içinden bulunan eleman onun arkasına taşınır. Ama arkasına eklenecek eleman seti birden fazlaysa, her birinin arkasına eklenecek olan elemanın klonlama ile elde edilen ikizi eklenir. Yukarıdaki kodun sonucu şöyle olur:

<div class="container">
    <div class="inner">Merhaba</div>
    <div class="inner">Hoşçakal</div>
</div>
<h2>Selamlaşma</h2>

Birden fazla elemana ekleme yapılmasını da şöyle örnekleyebiliriz:

$( ".inner" ).after( $( "h2" ) );

Bu kodun sonucu oluşan HTML şöyle olur:

<div class="container">
    <div class="inner">Merhaba</div>
    <h2>Selamlaşma</h2>
    <div class="inner">Hoşçakal</div>
    <h2>Selamlaşma</h2>
</div>

Fonksiyon Olarak Parametre:

JQuery versiyon 1.4'ten sonra .after() metodu eklenecek içeriği dönen bir fonksiyonu da parametre olarak kabul etmeye başladı.

$( "p" ).after(function() {
  return "<div>" + this.className + "</div>";
});

Bu kod her <p> elemanı arkasına bir <div> elemanı ekler ve içine paragrafın sınıf değerini yazar.


İlave Parametreler

Diğer içerik ekleyen .prepend() ve .before() metodları gibi .after() metodu da parametresinde birden fazla girdiyi kabul eder. Bu girdiler DOM elemanları, jQuery nesneleri, HTML stringler ve DOM elemanlarından oluşan bir array olabilir.

Örneğin aşağıdaki kod , ilk paragrafın arkasına 2 yeni <div> ve bir mevcut <div> elemanını ekler.

var $newdiv1 = $( "<div id='object1'>newdiv 1</div>" ),
  newdiv2 = document.createElement( "div" ),
  existingdiv1 = document.getElementById( "foo" );
 
$( "p" ).first().after( $newdiv1, [ newdiv2, existingdiv1 ] );

.after() metodu istenen sayıda argüman alabildiği için yukarıda 3 eleman da
$( "p" ).first().after( $newdiv1, newdiv2, existingdiv1 ) şeklinde virgül ile ayrılmış şekilde verebilirsiniz.



Örnekler :

Tüm paragrafların sonrasına bazı HTML eklenir.

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JQuery Öğrenimi</title>
        <script src="jquery.js"></script>
        <style>
            p {
                background: yellow;
            }
        </style>        
    </head>
    <body>
        <p>Şunu demek isterim ki: </p>
        <script>
            $( "p" ).after( "<b>Hello</b>" );
        </script>
    </body>
</html>

Demo:

Şunu demek isterim ki:


Tüm paragrafların sonrasına bir DOM elemanı eklenir.

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JQuery Öğrenimi</title>
        <script src="jquery.js"></script>
        <style>
            p {
                background: yellow;
            }
        </style>        
    </head>
    <body>
        <p>Şunu demek isterim ki: </p>
        <script>
            $( "p" ).after( document.createTextNode( "Hello" ) );
        </script>
    </body>
</html>

Şunu demek isterim ki:


Tüm paragrafların sonrasına bir jQuery nesne (DOM elemanlarından bir array'e benzer) eklenir.

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JQuery Öğrenimi</title>
        <script src="jquery.js"></script>
        <style>
            p {
                background: yellow;
            }
        </style>        
    </head>
    <body>
        <b>Hello</b>
        <p>Şunu demek isterim ki: </p>
        <script>
            $( "p" ).after( $( "b" ) );
        </script>
    </body>
</html>

Hello

Şunu demek isterim ki:

.

.