Html Nesnelerinin İçerik ve Özelliklerini Değiştirme
Html DOM arabirimi sayesinde javascript gibi diller kullanılarak, html nesnelerinin içeriklerine ve özelliklerine ulaşılabilir ve değişiklik yapılabilir.
Html elemanlarının içeriğini elde etmek ve değiştirmek için şu metotlar kullanılabilir:
text : Belirtilen nesne içindeki metni almayı veya değiştirmeyi sağlar. Etiketin içindeki html kodları atlanarak sadece düz metin elde edilir. (Örnekler kısmını inceleyiniz.)
html : Belirtilen nesnenin içeriğini html cinsinden elde etmeyi veya değiştirmeyi sağlar.
val : Form elemanlarının, örneğin bir metin kutusunun içindeki değeri (value) elde etmek ve değiştirmek için kullanılır.
Html etiketlerinin özelliklerini (parametre değerlerini) elde etmek ve değiştirmek için ise attr metodu kullanılır. (sonraki konu)
Text() Metodu ile Html Etiketleri İçindeki Metni Değiştirme
Örnekler kısmında göreceğiniz gibi, text metodu bir html elemanının içindeki düz metni elde etmeye yarar.
Html etiketi içindeki metni almak için;
Değiştirmek için ise;
$("#metin2").text(“eklenecek metin”);
Örneğin, h1 etiketi içindeki metni bir değişkene alalım:
var a = $("h1 ").text();
Şimdi de id’di kutu1 olan etiketin içindeki metni “Selam” olarak değiştirelim:
$("#kutu1").text(“Selam”);
Aşağıdaki örnek ise metin1 elemanı içindeki metni, metin2 elemanına yazar. (Örnekler kısmında çalışan hali mevcut.)
$("#button1").click(function(){
var birinciParagraf = $("#metin1").text();
$("#metin2").text(birinciParagraf);
});
JQuery Html() Metodu ile Html Etiketlerinin İçeriğini Değiştirme
Html metodu, bir elemanın içeriğini, içerdiği html etiketleri de dahil olacak şekilde elde etmemizi veya değiştirmemizi sağlar.
Html etiketinin içeriğini almak için;
Değiştirmek için ise;
$("#metin2"). html (“eklenecek içerik”);
Örneğin, article etiketinin tüm içeriğini bir değişkene alalım:
var icerik = $("article "). html ();
Şimdi de id’di kutu1 olan etiketin içeriğini “<b>Selam</b>” olarak değiştirelim:
$("#kutu1").html(“<b>Selam</b>”);
Aşağıdaki örnek ise metin1 elemanı içindeki metni, metin2 elemanına yazar. (Örnekler kısmında çalışan hali mevcut.)
$("#button1").click(function(){
var birinciParagraf = $("#metin1"). html ();
$("#metin2"). html (birinciParagraf);
});
Form Elemanının Değerini Elde Etme ve Değiştirme
Html form elemanları içindeki değeri elde etmek için val() metodu kullanılır.
Örneğin id’si kutu1 olan bir metin kutusunun değerini elde etmek için;
var sayi = $("#kutu1").val();
Değiştirmek için ise;
$("#kutu1").val(sayi);
$("#kutu1").val(“Selam”);
$("#kutu1").val(123);
gibi örnekler verilebilir.
Konu Örneklerini inceleyiniz ve kendiniz deneyiniz.
jquery html elemanlarının içini değiştirme, html etiketlerinin içeriğini elde etme değiştirme, etiketlerin özelliklerini değiştirme, jquery html dom manipulation examples
KONU İLE İLGİLİ ÖRNEKLER
Kendin Dene butonuna tıklayarak kodları değiştirebilirsin.
$("#button1").click(function(){
var birinciParagraf=$("#metin1").text();
$("#metin2").text(birinciParagraf);
});
Bu örnekte metin1 id'li etiketin içindeki sadece metni alıp, metin2 id'li etiket içine yazıyoruz.
Kendin Dene butonuna tıklayarak kodları değiştirebilirsin.
$("#button1").click(function(){
var birinciParagraf=$("#metin1").html();
$("#metin2").html(birinciParagraf);
});
Bu örnekte metin1 id'li etiketin içeriği html etiketleri de dahil olmak üzere, metin2 etiketi içine ekleniyor.
Kendin Dene butonuna tıklayarak kodları değiştirebilirsin.
$("#button1").click(function(){
var sayi=$("#kutu1").val();
sayi++;
$("#kutu1").val(sayi);
});
Bu örnekte kutu1 id'li metin kutusunun içindeki değer alınıyor, 1 arttırılıyor ve tekrar kutu1'in içine yazılıyor.
16836 kez okundu.