jQuery Bilgi Ekleme

jQuery ile HTML'nize yeni element ve içerik eklemek çok kolay!

Bunun için dört yöntemimiz var:

- append() - İçeriği seçili elementin sonuna ekler.
- prepend() - İçeriği seçili elementin başına ekler.
- after() - Seçilen elementten sonra içeriği ekler.
- before() - Seçili elementten önce içeriği ekler.

Şimdi bunları birer örnekle tanıyalım.

jQuery append() Yöntemi

Bir elementin bittiği yere içerik ekler.

Örneği inceleyelim:

JAVASCRIPT Kodu

<ol>
   <li>Nesne 1</li>
   <li>Nesne 2</li>
   <li>Nesne 3</li>
</ol>
<button id="btn1">Yeni nesne ekle</button>
<script>

$(document).ready(function(){
  $("#btn1").click(function(){
    $("ol").append("<li>Yeni nesne</li>");
  });
});
</script><br/><br/>

Nesne 1
Nesne 2
Nesne 3

"Yeni nesne ekle" butonuna tıklandığında <OL></OL> elementleri arasına yeni bir LI değeri eklediği görülebilir.

jQuery prepend() Yöntemi

Bir elementin başladığı yere içerik ekler.

Yukarıdaki örnekte $("ol").append(... olan kısımda append yazan yeri prepend olarak değiştirip deneyin. Bu kez içeriğin listenin sonuna değil başına eklendiğini göreceksiniz.

Sayfanıza append() kullanarak yeni HTML elementleri eklerken üç yol izleyebilirsiniz:

1. Yol: HTML Kullanmak

JAVASCRIPT Kodu

var txt1="<p>Text.</p>";

2. Yol: jQuery ile Eklemek

JAVASCRIPT Kodu

var txt2=$("<p></p>").text("Text.");

3. Yol: HTML DOM Kullanmak

JAVASCRIPT Kodu

var txt3=document.createElement("p");
txt3.innerHTML="Text.";

Aşağıdaki örneği çalıştırarak aynı anda üç yöntemi de kullanarak üç adet element oluşturduğumuzu göreceksiniz.

JAVASCRIPT Kodu

<script>
function appendText()
{
   var txt1="<p>Yöntem 1</p>";

   var txt2=$("<p></p>").text("Yöntem 2");

   var txt3=document.createElement("p");
   txt3.innerHTML="Yöntem 3";

   $("#div1").append(txt1,txt2,txt3);
}
</script><br/><br/>
<div id="div1"> </div>
<button onclick="appendText();">Elementleri Ekle</button><br/><br/>

jQuery after() Yöntemi

Bir HTML elementinden önce başka bir element ya da içerik eklemek için bu kodu kullanırız.

jQuery before() Yöntemi

Bir HTML elementinden sonra başka bir element ya da içerik eklemek için bu kodu kullanırız.

Aşağıdaki örnek after() ve before() yöntemini anlamamızı kolaylaştıracaktır.

JAVASCRIPT Kodu

<script>
$(document).ready(function(){
  $("#btn7").click(function(){
    $("#ana").before("<b>«</b>");
  });

  $("#btn8").click(function(){
    $("#ana").after("<b>»</b>");
  });
});
</script>
<span id="ana">[BAŞLIK]</span><br>
<button id="btn7">Öncesine Ekle</button>
<button id="btn8">Sonrasına Ekle</button><br/><br/>

[BAŞLIK]

Kodu çalıştırdığınızda "btn1" idli butona bastığınızda BAŞLIK yazısının soluna, "btn2" idli butona bastığınızda BAŞLIK yazısının sağına içeriği («/») ekliyor.

after() ve before() yöntemlerini de yeni HTML elementleri eklemek için kullanabilirsiniz (Bu kullanım yukarıda append() komutunda anlatılmıştır).

jQuery Bilgi Ekleme

jQuery append() Yöntemi

JAVASCRIPT Kodu

jQuery prepend() Yöntemi

JAVASCRIPT Kodu

JAVASCRIPT Kodu

JAVASCRIPT Kodu

JAVASCRIPT Kodu

jQuery after() Yöntemi

jQuery before() Yöntemi

JAVASCRIPT Kodu

jQuery Nedir?

jQuery Efektleri

jQuery HTML

jQuery Nesneler

jQuery AJAX