Bu yazımızda, JQuery ile dom nesnelerine nasıl eklemeler yapabileceğimiz üzerine bir uygulama yapacağız.
Dom Nesnelerine Ekleme Yapma Fonksiyonları:
- .append() ://Belirtilen nesnenin arkasına yeni bir içerik ekler, içine dahil eder
- .appendTo() ://Belirtilen nesneyi girilen nesne veya nesnelerin sonuna (nesne içinde) ekler.
- .prepend() ://Belirtilen nesnenin önüne (nesne içinde) yeni içerik ekler.
- .after() ://Belirtilen nesnenin arkasına (Aynı seviyede sibling olarak)girilen içeriği nesne olarak ekler.
- .before() ://Belirtilen nesnenin önüne (Aynı seviyede sibling olarak)girilen içeriği nesne olarak ekler.
- .insertAfter() ://Belirtilen nesnenin arkasına girilen içeriği nesne olarak ekler (.after() ile aynıdır sadece nesneye uygulanma şekli farklıdır).
- .insertBefore() ://Belirtilen nesnenin önüne girilen içeriği nesne olarak ekler (.before() ile aynıdır sadece nesneye uygulanma şekli farklıdır).
Uygulama:
Bu uygulamamızda "span" değeri "p" içine eklendiğinde eklenen değerin arkaplan rengi "sarı" olacak, "p" dışına (sibling) eklendiğin de ise arkaplan rengi "yeşil" olacak
Aşağıdaki kutuya istediğinizi yazıp, butonlarla ekleme fonksiyon çeşitlerini deneyebilirsiniz.
<span>
</span>
Bu paragraf değerimiz bunun içinde değişiklikler yapacağız...
CSS yapısı:
#area_product{
position:relative;
border:1px dashed #ff0000;
width:600px;
height:140px;
padding:5px;
clear:both;
}
#area_product p span{
background-color:yellow;
color:black;
}
#area_product span{
background-color:green;
color:white;
}
HTML yapısı:
<div id="area_product">
<span><input type="text" id="span_value" value="Bu değer eklenecek..." /></span><br />
<p id="change_par">Bu paragraf değerimiz bunun içinde değişiklikler yapacağız...</p>
</div>
<button id="append" onclick="start_append(this.id)">append</button>
<button id="appendTo" onclick="start_append(this.id)">appendTo</button>
<button id="prepend" onclick="start_append(this.id)">prepend</button>
<button id="prependTo" onclick="start_append(this.id)">prependTo</button>
<button id="after" onclick="start_append(this.id)">after</button>
<button id="before" onclick="start_append(this.id)">before</button>
<button id="insertAfter" onclick="start_append(this.id)">insertAfter</button>
<button id="insertBefore" onclick="start_append(this.id)">insertBefore</button>
JQuery Kodları:
<script type="text/javascript">
function start_append(id){
var box_value=$("#span_value").val();
$("#change_par").text("Bu paragraf değerimiz bunun içinde değişiklikler yapacağız...");
$("#area_product span").remove();
switch (id){
case "append":
alert("'"+box_value+"' paragrafın sonuna eklenecek ve sarı olacak");
$("#change_par").append('<span>'+box_value+'</span>');
break;
case "appendTo":
alert("'"+box_value+"' paragrafın sonuna eklenecek ve sarı olacak");
$('<span>'+box_value+'</span>').appendTo('#change_par');
break;
case "prepend":
alert("'"+box_value+"' paragrafın önüne eklenecek ve sarı olacak");
$("#change_par").prepend('<span>'+box_value+'</span>');
break;
case "prependTo":
alert("'"+box_value+"' paragrafın önüne eklenecek ve sarı olacak");
$('<span>'+box_value+'</span>').prependTo('#change_par');
break;
case "after":
alert("'"+box_value+"' paragrafın (dışarda-sibling) sonuna eklenecek ve yeşil olacak");
$("#change_par").after('<span>'+box_value+'</span>');
break;
case "before":
alert("'"+box_value+"' paragrafın (dışarda-sibling) önüne eklenecek ve yeşil olacak");
$("#change_par").before('<span>'+box_value+'</span>');
break;
case "insertAfter":
alert("'"+box_value+"' paragrafın (dışarda-sibling) sonuna eklenecek ve yeşil olacak");
$('<span>'+box_value+'</span>').insertAfter("#change_par");
break;
case "insertBefore":
alert("'"+box_value+"' paragrafın (dışarda-sibling) önüne eklenecek ve yeşil olacak");
$('<span>'+box_value+'</span>').insertBefore("#change_par");
break;
}
}
</script>
Açıklamalar:
Kodları ayrıntılı olarak açıklamayacağım. Sadece, eklemeyi yaparken seçilen nesnelerin yerine dikkat etmenizi istiyorum. Şöyleki: ".after()" fonksiyonunda, ilk olarak sonuna nesne eklenmesini istediğimiz nesneyi seçip, sonra eklenecek nesneyi belirtiyoruz, "insertAfter()" fonksiyonunda ise ilk olarak eklenecek nesneyi seçip, sonra hangi nesnenin arkasına eklenecekse o nesneyi seçiyoruz. Diğerleri de benzer mantıkla işlev görmektedir.
Kolay gelsin, görüşmek üzere...
