Jquery ile Html İçerik ve Özellik Değiştirme

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.

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;

$("#metin1").text();

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

tml 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;

$("#metin1").html();

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.