Mengisi Elemen Dan Konten

View Categories

Mengisi Elemen Dan Konten

JQuery mempunyai beberapa fungsi yang dapat dipakai untuk mengubah konten suatu elemen HTML.

Mengubah Konten Elemen

Fungsi-fungsi yang biasa digunakan untuk mengubah konten elemen HTML adalah :

  • text() – Mengubah isi text dari suatu elemen HTML
  • html() – Mengubah source coding HTML dari suatu elemen HTML termasuk deklarasi tag
  • val() – Mengubah nilai dari suatu elemen input atau form elemen

Ketiga fungsi di atas adalah fungsi yang sama dengan yang digunakan untuk mengambil konten elemen HTML. Yang membedakan adalah parameter yang diberikan kepada ketiga fungsi di atas. Untuk mengubah konten elemen HTML kita perlu memberikan parameter kepada ketiga fungsi di atas.

Contoh di bawah ini memperlihatkan contoh pemakaian fungsi text, html dan val yang digunakan untuk mengubah konten elemen HTML.

$("#btn1").click(function(){
  $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
  $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
  $("#test3").val("Dolly Duck");
});

Jalankan Contoh

Ketiga fungsi di atas juga mempunya fungsi callback dengan dua parameter. Parameter pertama adalah posisi elemen dan parameter kedua adalah nilai konten lama elemen sebelum diganti. Contoh di bawah ini memperlihatkan cara menggunakan fungsi callback pada ketiga fungsi di atas.

$("#btn1").click(function(){
  $("#test1").text(function(i, origText){
    return "Old text: " + origText + " New text: Hello world!
    (index: " + i + ")";
  });
});

$("#btn2").click(function(){
  $("#test2").html(function(i, origText){
    return "Old html: " + origText + " New html: Hello <b>world!</b>
    (index: " + i + ")";
  });
});

Jalankan Contoh

Mengubah Nilai Atribut

Fungsi attr digunakan untuk mengubah nilai atribut suatu elemen HTML. Untuk mengubah nilai atribut, gunakan fungsi attr dengan dua parameter. Parameter pertama adalah nama atribut yang akan diganti. Parameter kedua adalah nilai atribut baru.

$("button").click(function(){
  $("#w3s").attr("href", "https://www.w3schools.com/jquery/");
});

Jalankan Contoh

Fungsi attr juga dapat mengubah nilai beberapa atribut sekaligus. Gunakan parameter dalam bentuk object untuk keperluan ini. Contoh di bawah ini memperlihatkan fungsi attr yang digunakan untuk mengubah nilai atribut href dan title.

$("button").click(function(){
  $("#w3s").attr({
    "href" : "https://www.w3schools.com/jquery/",
    "title" : "W3Schools jQuery Tutorial"
  });
});

Jalankan Contoh

Fungsi attr juga mempunyai fungsi callback dengan dua parameter. Parameter pertama adalah posisi elemen dan parameter kedua adalah nilai atribut lama elemen sebelum diganti.

$("button").click(function(){
  $("#w3s").attr("href", function(i, origValue){
    return origValue + "/jquery/";
  });
});

Jalankan Contoh

Tutorial sebelumnya : Mengambil Elemen Dan Konten
Tutorial setelahnya : Menambah Elemen Dan Konten
Semua Tutorial JQuery : Tutorial JQuery 

Tinggalkan Balasan