jQuery Dersleri
jQuery Nedir?
jQuery Nedir?
jQuery Kurulumu
jQuery Kod Yapısı
jQuery ready Fonksiyonu
jQuery Nesne Seçimi
jQuery Fonksiyonlar

jQuery Efektleri
jQuery Gizle ve Göster
jQuery Kaydırma
jQuery Animasyonlar
jQuery callback
jQuery Toplu İşlemler

jQuery HTML
jQuery Bilgi Almak
jQuery Bilgi Değiştirme
jQuery Bilgi Ekleme
jQuery Veri Silme
jQuery'de CSS İşlemleri

jQuery Nesneler
jQuery Nesne Bulma/Seçme
jQuery Nesne Boyutları

jQuery AJAX
jQuery AJAX

Bağlantılar
HTML Dersleri
JavaScript Dersleri
CSS Dersleri
ASP Dersleri
PHP Dersleri
MySQL Komutları
jQuery Dersleri
Venus Programlama

Ana Sayfa Bize Ulaşın

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/>

  1. Nesne 1
  2. Nesne 2
  3. 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).

Tüm hakları saklıdır. Lütfen kaynak belirtmeden sitenizde yayınlamayın. Web Sitesi © 2014