En son web geliştirme öğreticiler
 

jQuery - Öğe Ekle

❮ Önceki Sonraki Bölüm ❯

jQuery ile, yeni elemanlar / içerik eklemek kolaydır.

Yeni HTML İçerik Ekle

Biz yeni içerik eklemek için kullanılan dört jQuery yöntemler ele alınacaktır:

  • append() - ekler Seçilen içerik unsurları sonunda
  • prepend() - seçilen elemanlardan başında yatağı içeriği
  • after() - seçilen elemanları sonra içerik ekler
  • before() - seçilen elemanları önce ekler içeriğine

jQuery append() Yöntem

JQuery append() metodu, seçilen HTML elemanlarının sonunda içerik ekler.

Örnek

$("p").append("Some appended text.");
Kendin dene "

jQuery prepend() Yöntem

JQuery prepend() metodu, seçilen HTML elemanlarının BAŞI içeriği ekler.

Örnek

$("p").prepend("Some prepended text.");
Kendin dene "

Ile Çeşitli Yeni Elements ekleme append() ve prepend()

Yukarıdaki iki örnekte de, biz sadece seçilmiş HTML öğelerinin başında / sonunda bazı metin / HTML taktınız.

Ancak, her iki append() ve prepend() yöntemleri parametre olarak yeni elemanların sonsuz sayıda sunar. (Biz yukarıdaki örneklerde yapmış gibi) yeni elemanlar jQuery ile, veya JavaScript kodu ve DOM unsurları ile, metin / HTML ile oluşturulabilir.

Aşağıdaki örnekte, birkaç yeni öğeleri oluşturmak. elementler metin / HTML, jQuery ve JavaScript / DOM ile oluşturulur. Sonra birlikte metne yeni unsurlar eklemek append() (bunun için çalışmış olurdu yönteme prepend() çok):

Örnek

function appendText() {
    var txt1 = "<p>Text.</p>";               // Create element with HTML 
    var txt2 = $("<p></p>").text("Text.");   // Create with jQuery
    var txt3 = document.createElement("p");  // Create with DOM
    txt3.innerHTML = "Text.";
    $("p").append(txt1, txt2, txt3);         // Append the new elements
}
Kendin dene "

jQuery after() ve before() Yöntemleri

JQuery after() metodu, seçilen HTML elemanları SONRA içeriği ekler.

JQuery before() metodu, seçilen HTML elemanları önce içerik ekler.

Örnek

$("img").after("Some text after");

$("img").before("Some text before");
Kendin dene "

Çeşitli Yeni Elemanları Birlikte Ekle after() ve before()

Ayrıca, her iki after() ve before() yöntemleri parametre olarak yeni elemanların sonsuz sayıda alabilir. (Biz yukarıdaki örnekte yapmış gibi) yeni elemanlar jQuery ile, veya JavaScript kodu ve DOM unsurları ile, metin / HTML ile oluşturulabilir.

Aşağıdaki örnekte, birkaç yeni öğeleri oluşturmak. elementler metin / HTML, jQuery ve JavaScript / DOM ile oluşturulur. Sonra birlikte metne yeni unsurlar eklemek after() yöntemi (bunun için çalışmış olurdu before() çok):

Örnek

function afterText() {
    var txt1 = "<b>I </b>";                    // Create element with HTML 
    var txt2 = $("<i></i>").text("love ");     // Create with jQuery
    var txt3 = document.createElement("b");    // Create with DOM
    txt3.innerHTML = "jQuery!";
    $("img").after(txt1, txt2, txt3);          // Insert new elements after <img>
}
Kendin dene "

Egzersizleri ile Yourself test edin!

Egzersiz 1 » Alıştırma 2» Egzersiz 3 » Alıştırma 4»

jQuery HTML Referansı

Tüm jQuery HTML yöntemlerin tamamını görmek için lütfen gidin lütfen jQuery HTML / CSS Referansı .


❮ Önceki Sonraki Bölüm ❯