.insertAfter()

.insertAfter(hedef) Dönen Değer : jQuery Nesnesi
Açıklama : Setteki her elemanı verilen hedef sonrasına ekler.

.insertAfter(hedef)
hedef
Tip : Seçici değer veya html string veya eleman veya array veya jQuery nesnesi.
Bulunulan set bu parametrede verilen hedef eleman(lar)a eklenir.

.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 koda bakalım :

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

Bir içerik üretip onu bir seçimin tüm elemanlarına bir defada ekleyebiliriz:

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

Her .inner sınıfa sahip <div> elemanından sonra ürettiğimiz "<p>Test</p>" içeriği eklenir. Sonuç HTML şöyle olacaktır:

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

Ayrıca sayfada bir elemanı seçip başka bir elemanın arkasına ekleyebiliriz. Yukarıdaki script'i şöyle değiştirelim :

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

Eğer arkasına eklemek için bir tek eleman varsa <h2> elemanı onun arkasına taşınır (klonlanmaz). Yukardaki kod sonrası oluşan HTML kod şöyle olur:

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

Ama arkasına eklenecek birden fazla eleman varsa ilk eklenen yine seçilen elemanın taşınması ile eklenir ve diğer eklenenler elemanın klonlanması ile yeni elemanlar oluşturularak eklenir. Yani script şöyle olsa :

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

Sonuçta oluşan HTML kod şö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>


İlave Notlar:

  • HTML string'den JQuery nesnesi üreten jQuery(), .append(), .after() gibi metodları kullanırken verilen string içinde yazılmış script'lerin çalıştırılma potansiyeli olduğundan cross-site-scripting (XSS) saldırılarından korunmak için, bu ve benzeri metodlarda URL sorgu parametresi, cookie'ler ya da form ile gönderilen verilerle üretilen stringleri kullanırken dikkat etmelisiniz. İçeriği dökümana eklemeden önce olası bu kodları string'den ayıklamanız gerekir.
  • JQuery resmi olarak SVG dökümanları desteklemez. Dökümantasyonda özellikle kullanımı belirtilmiyorsa jQuery metodlarını SVG dökümanlarda kullanmak beklenmeyen sonuçlara sebep olabilir. Versiyon 3.0'dan itibaren örneğin .addClass() ve .removeClass() metodları SVG desteklemeye başlamıştır.


Örnekler :

Tüm paragrafları , id değeri foo olan elemanın arkasına ekle. Bu kod
$( "#foo" ).after( "p" ) ile aynı işi yapar :

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JQuery Öğrenimi</title>
        <script src="jquery.js"></script>
        <style>
            #foo {
                background: yellow;
            }
        </style>        
    </head>
    <body>
        <p> dedim sana... </p>
        <div id="foo">FOO!</div>
        <script>
            $( "p" ).insertAfter( "#foo" );
        </script>
    </body>
</html>

Demo:

dedim sana...

FOO!

.

.