Turkcell | Geleceği Yazanlar

302: JQueryBaşlangıç seviyesi derslerde Web Programlama uygulama geliştirme ortamını detaylı olarak inceliyoruz.

Tüm Eğitimleri Aldın mı? Kendini sınamanın tam zamanı

Haydi Sınava Gir

jQuery after()ve before() Metotları

Kategori : Mobil | Lisans : Creative Commons (by-nc-sa) | En son 12.09.2019 tarihinde güncellendi
Eğitmen : Geleceği Yazanlar Ekibi
Etiketler : web-programlama

jQuery after() metodu, bir içeriği, seçilen HTML elemanından sonra ekler. jQuery before() metodu, bir içeriği, seçilen HTML elemanından önce ekler.

$("img").after("…BİR METİN");
$("img").before("BİR METİN…");

Aşağıda after() ve before() metotlarına dair örnek HTML kodlarını bulabilirsiniz:

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                              $("#btn1").click(function(){
                                               $("img").before("<b>ONCE</b>");
                                               });
                              
                              $("#btn2").click(function(){
                                               $("img").after("<i>SONRA</i>");
                                               });
                              });
            </script>
    </head>
    
    <body>
        <img src="https://gelecegiyazanlar.turkcell.com.tr/sites/default/files/styles/slider_image/public/ios_1.jpg?itok=dRAA8s8X" alt="jQuery" width="80" height="90">
            <br><br>
            <button id="btn1">ONCE EKLE</button>
            <button id="btn2">SONRA EKLE</button>
    </body>
</html>

ONCE EKLE dediğiniz zaman belirlediğiniz metin resmin önüne eklenecektir.

SONRA EKLE dediğiniz zaman ise, belirlediğiniz metin resmin sonuna eklenecektir.

 

after() ve before() metotları ile çok sayıda HTML elemanı ekleme

after() ve before() metotları, çok sayıda yeni HTML elemanını parametre olarak alabilirler. Yeni elemanlar ya yukardaki örneklerdeki gibi jQuery + metin/HTML metodu ile ya da JavaScript kodu + DOM elemanları yolu ile üretilir.

Örnek:

function afterText() {
    var txt1 = "<b>I </b>";                    // HTML
    var txt2 = $("<i></i>").text("love ");     // jQuery jQuery
    var txt3 = document.createElement("b");    // DOM
    txt3.innerHTML = "jQuery!";
    $("img").after(txt1, txt2, txt3);          // resimden sonra
}

Örnek HTML kodunu dikkatle inceleyelim:

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>
            function afterText() {
                var metin1 = "<b>BOGAZICI</b>";                   //  HTML
                var metin2 = $("<i></i>").text("SEN");    // jQuery
                var metin3 = document.createElement("b");   //  DOM
                metin3.innerHTML = "GONULLER DIYARI";
                $("img").after(metin1, metin2, metin3);      // RESIMDEN SONRA EKLE
            }
        </script>
    </head>
    <body>
        
        <img src="https://gelecegiyazanlar.turkcell.com.tr/sites/default/files/styles/slider_image/public/ios_1.jpg" alt="jQuery" width="70" height="70">
            
            <p>RESIMDEN SONRA EKLE</p>
            
            <button onclick="afterText()">SONRA EKLE</button>
            
    </body>
</html>

Burada SONRA EKLE düğmesini tıklayınız; metnin resmin sağ tarafına yani resimden sonra yerleşeceğini göreceksiniz. SONRA EKLE düğmesine bir kez daha tıkladığınızda, aynı işlem tekrarlanacaktır.