Web Programlama

Web Programlama

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

Çok Sayıda Yeni HTML Elemanını append() ve prepend() İle Ekleme

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

Bir önceki eğitimde bazı Metin/HTML değerlerini seçilen HTML elemanının önüne/sonuna ekledik. Oysa, hem append() hem de prepend() metotları sonsuz sayıda yeni elemanı parametre olarak alabilir. Yeni elemanlar ya demin bahsettiğimiz gibi jQuery + metin/HTML metodu ile ya da JavaScript kodu + DOM elemanları yolu ile üretilir.

Örneğimiz konuyu daha iyi anlamanızı sağlayacaktır:

function appendText() {
    var txt1 = "<p>Text.</p>";               // HTML  ile eleman oluştur
    var txt2 = $("<p></p>").text("Text.");   // jQuery  ile
    var txt3 = document.createElement("p");  // DOM  ile
    txt3.innerHTML = "Text.";
    $("p").append(txt1, txt2, txt3);         //yeni elemanları ekle
}

 

Çok sayıda eleman ekleme

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>
            function appendText() {
                var metin1 = "<p>Metin.</p>";              //  HTML
                var metin2 = $("<p></p>").text("Metin.");  //  jQuery
                var metin3 = document.createElement("p");
                metin3.innerHTML = "Metin.";               // DOM
                $("body").append(metin1, metin2, metin3);     // yeni elemanlar
            }
        </script>
    </head>
    <body>
 
        <p>ILK SATIR</p>
        <button onclick="appendText()">METIN EKLE</button>
 
    </body>
</html>

METIN EKLE düğmesi her tıklandığında metin ekleme işi başarıyla sürecektir.

Sınava Gir