jQuery element eklemesi

jQuery ile yeni element/content eklemek oldukça kolaydır.

Yeni HTML içeriği eklenir

Yeni içerik eklemek için kullanılan dört jQuery yöntemini öğreneceğiz:

  • append() - Seçili elementin sonuna içerik ekler
  • prepend() - Seçili elementin başına içerik ekler
  • after() - Seçili elementin sonrasına içerik ekler
  • before() - Seçili elementin öncesine içerik ekler

jQuery append() yöntemi

jQuery append() yöntemi seçili elementin sonuna içerik ekler.

Örnek

$("p").append("Eklenen bazı metin.");

Kişisel olarak deneyin

jQuery prepend() yöntemi

jQuery prepend() yöntemi seçili elementin başına içerik ekler.

Örnek

$("p").prepend("Eklenen bazı metin.");

Kişisel olarak deneyin

append() ve prepend() yöntemleri ile birkaç yeni element eklenir

Üstteki örnekte, sadece seçili elementin başına/sonuna text/HTML ekledik.

Ancak, append() ve prepend() yöntemleri parametre olarak sınırsız sayıda yeni element alabilir. Üstteki örnekteki gibi jQuery ile text/HTML oluşturulabilir veya JavaScript kodu ve DOM elementleri ile oluşturulabilir.

Aşağıdaki örnekte, birkaç yeni element oluşturduğumuzu görüyoruz. Bu elementler text/HTML, jQuery veya JavaScript/DOM ile oluşturulabilir. Daha sonra bu yeni elementleri text'e append() yöntemi ile ekleyebiliriz (prepend() için de geçerlidir):

Örnek

function appendText()
{
var txt1="<p>Metin.</p>";               // HTML ile yeni bir element oluşturma
var txt2=$("<p></p>").text("Metin.");   // jQuery ile yeni bir element oluşturma
var txt3=document.createElement("p");  // DOM ile yeni bir element oluştur
txt3.innerHTML="Metin.";
$("p").append(txt1,txt2,txt3);         // Yeni elementleri ekle
{}

Kişisel olarak deneyin

jQuery after() ve before() yöntemleri

jQuery after() yöntemi seçilen elementin sonrasında içerik ekler.

jQuery before() yöntemi seçilen elementin öncesinde içerik ekler.

Örnek

$("img").after("Sonraki metin");
$("img").before("Önceki metin");

Kişisel olarak deneyin

after() ve before() yöntemleri ile yeni elementler eklenir

after() ve before() yöntemleri sınırsız sayıda yeni element alabilir. Yeni elementler text/HTML, jQuery veya JavaScript/DOM ile oluşturulabilir.

Aşağıdaki örnekte, birkaç yeni element oluştururuz. Bu elementler text/HTML, jQuery veya JavaScript/DOM ile oluşturulabilir. Ardından bu yeni elementleri text'e after() yöntemi ile ekleriz (before() için de geçerlidir):

Örnek

function afterText()
{
var txt1="<b>I </b>";                    // HTML ile yeni bir element oluştur
var txt2=$("<i></i>").text("sevgi ");     // jQuery üzerinden yeni bir element oluştur
var txt3=document.createElement("big");  // DOM üzerinden yeni bir element oluştur
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3);          // img ardından yeni bir element ekle
{}

Kişisel olarak deneyin

jQuery HTML referans el kitabı

jQuery HTML yöntemlerinin tam içeriği hakkında bilgi almak için aşağıdaki referans el kitabını ziyaret edin: