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

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

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

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.