jQuery .after() Metodu

jQuery after() metodu, belirli bir elementten sonra gelmesini istediğimiz html elementini oluşturan metod.

"div" elementinin ardında "p" elementi oluşturalım
Örnek 1 (jQuery)
        jQuery(document).ready(function () {
            jQuery("div").after("<p>div elementinin ardına eklenen p elementi</p>");
        });
Örnek 1 (Css)
        div{width:50px;height:50px;background:blue;}
        p{background:rgb(204, 204, 204);color:#000;padding:3px;margin:2px 0px 3px 0px;}
Örnek 1 (Elementler)
    <div></div>
Örnek 1


"div" elementlerinden 3.sünün ardına p elementi ekleme
Örnek 2 (jQuery)
        jQuery(document).ready(function () {
            jQuery("div:eq(2)").after("<p>div elementinin ardına eklenen p elementi</p>");
            //Eleman dizilimi 0'dan başlamaktadır.
            //1. elemanı seçmek için eq(0), 2. elemanı seçmek için eq(1) olarak belirtmemiz gerekirdi.
        });
Örnek 2 (Css)
div{width:100px;height:50px;background:blue;margin-bottom:3px;line-height:50px;color:#fff;text-align:center;}
p{background:#ccc;color:#000;padding:3px;margin:2px 0px 3px 0px;}
Örnek 2 (Elementler)
    <div>1. eleman</div>
    <div>2. eleman</div>
    <div>3. eleman</div>
    <div>4. eleman</div>
    <div>5. eleman</div>
    <div>6. eleman</div>
    <div>7. eleman</div>
    <div>8. eleman</div>
Örnek 2
1. eleman
2. eleman
3. eleman
4. eleman
5. eleman
6. eleman
7. eleman
8. eleman


"ul" elementinin "li" elemanlarından tıklananın ardına yeni bir "li" elemanı ekleyen örneğimiz
Örnek 3 (jQuery)
    jQuery(document).ready(function () {
        //"ul" elementinin "li" elemanlarından herhangi birine tıklanırsa
        jQuery("ul li").click(function () {
            //Tıklanan bu "li" elemanının ardına yeni bir "li" elemanı ekle
            jQuery(this).after("
  • sonradan eklendi
  • "); }); });
    Örnek 3 (Css)
    ul{width:150px;list-style-type:none;padding:0px;}
    ul li{padding:3px;border:1px solid #421f9a;margin:0px 0px 1px 3px;cursor:pointer;}
    .kirmizi{border:1px solid red;margin-left:10px;}
    
    Örnek 3 (Elementler)
        <ul>
            <li>1. eleman</li>
            <li>2. eleman</li>
            <li>3. eleman</li>
            <li>4. eleman</li>
        </ul>
    
    Örnek
    • 1. eleman
    • 2. eleman
    • 3. eleman
    • 4. eleman

    Yorumlar

    Henüz hiçbir yorum yazılmamış. İlk yorumu siz yapın.

    Yorum Yaz

    Avatar

    REKLAM

    DDos Koruma, Botnet Koruma, Layer 7 Saldırı koruması, Sanal sunucu, Vds sunucu

    REKLAM

    Çizgi Filmler

    EN

    • Popüler
    • Yeni
    • Son Yorum