Web Programlama

Web Programlama

DERS PROGRAMI
Web Programlama 302 Ders Programı
Sınava Gir

jQuery after()ve before() Metotları

Lisans: Creative Commons 26.11.2020 tarihinde güncellendi
Bakabileceğiniz Etiketler: Eğitmen: Geleceği Yazanlar Ekibi

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.

Sınava Gir