jQuery - Öğe Ekle
jQuery ile yeni öğeler/içerik eklemek kolaydır.
Yeni HTML İçeriği Ekle
Yeni içerik eklemek için kullanılan dört jQuery yöntemine bakacağız:
append()- Seçilen öğelerin sonuna içerik eklerprepend()- Seçilen öğelerin başına içerik eklerafter()- Seçilen öğelerden sonra içerik eklerbefore()- Seçili öğelerden önce içerik ekler
jQuery append() Yöntemi
jQuery append()yöntemi, seçilen HTML öğelerinin SONUNA içerik ekler.
Örnek
$("p").append("Some appended text.");
jQuery prepend() Yöntem
jQuery prepend()yöntemi, seçilen HTML öğelerinin BAŞLANGIÇINDA içerik ekler.
Örnek
$("p").prepend("Some prepended text.");
Append() ve prepend() ile Birkaç Yeni Öğe Ekleme
Yukarıdaki her iki örnekte de, seçilen HTML öğelerinin başına/sonuna yalnızca bir miktar metin/HTML ekledik.
Bununla birlikte, hem append()ve prepend()yöntemleri, sonsuz sayıda yeni öğeyi parametre olarak alabilir. Yeni öğeler, metin/HTML ile (yukarıdaki örneklerde yaptığımız gibi), jQuery ile veya JavaScript kodu ve DOM öğeleriyle oluşturulabilir.
Aşağıdaki örnekte, birkaç yeni öğe oluşturuyoruz. Öğeler metin/HTML, jQuery ve JavaScript/DOM ile oluşturulur. Sonra yeni öğeleri metne şu append()yöntemle ekleriz (bu da işe
prepend()yarardı):
Ö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.";
$("body").append(txt1, txt2, txt3); // Append the new elements
}
jQuery after() ve Before() Yöntemleri
jQuery after()yöntemi, içeriği seçilen HTML öğelerinden SONRA ekler.
jQuery before()yöntemi, içeriği seçilen HTML öğelerinden ÖNCE ekler.
Örnek
$("img").after("Some text after");
$("img").before("Some text before");
after() ve Before() ile Birkaç Yeni Öğe Ekleme
Ayrıca, hem after()ve before()yöntemleri, sonsuz sayıda yeni öğeyi parametre olarak alabilir. Yeni öğeler, metin/HTML ile (yukarıdaki örnekte yaptığımız gibi), jQuery ile veya JavaScript kodu ve DOM öğeleriyle oluşturulabilir.
Aşağıdaki örnekte, birkaç yeni öğe oluşturuyoruz. Öğeler metin/HTML, jQuery ve JavaScript/DOM ile oluşturulur. Sonra metne yeni öğeleri şu after()yöntemle ekleriz (bu da işe
before()yarardı):
Ö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>
}
jQuery Alıştırmaları
jQuery HTML Referansı
Tüm jQuery HTML yöntemlerine tam bir genel bakış için lütfen jQuery HTML/CSS Referansımıza gidin .