Pada tutorial sebelumnya, kita sudah belajar cara mengambil informasi dari elemen HTML menggunakan .text(), .html(), dan .val(). Sekarang, saatnya kita belajar cara mengatur atau mengubah informasi tersebut. Metode yang sama yang digunakan untuk mengambil nilai juga dapat digunakan untuk mengatur nilai, menjadikannya sangat fleksibel.
1. .text(content): Mengatur Teks Elemen
Metode .text() tidak hanya untuk mengambil teks, tapi juga untuk mengatur konten teks dari elemen yang dipilih. Semua tag HTML yang diberikan sebagai input akan diperlakukan sebagai teks biasa.
Sintaks:
$(selector).text("Teks baru di sini");
Contoh Praktik:
<!DOCTYPE html>
<html>
<head>
<title>Set Text jQuery</title>
</head>
<body>
<p id="paragrafAsli">Ini adalah teks asli.</p>
<button id="gantiTeks">Ganti Teks</button>
<p id="pesan"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#gantiTeks").click(function(){
// Mengubah teks dari elemen <p> dengan ID "paragrafAsli"
$("#paragrafAsli").text("Teks ini sudah diganti oleh **jQuery**!");
// Menampilkan pesan bahwa perubahan berhasil
$("#pesan").text("Teks berhasil diubah.");
});
});
</script>
</body>
</html>
Ketika tombol diklik, paragraf akan berubah menjadi “Teks ini sudah diganti oleh jQuery!” dan tag <strong> tidak akan di-render sebagai HTML, melainkan sebagai bagian dari teks.
2. .html(content): Mengatur Seluruh Konten HTML
Metode .html() juga bisa digunakan untuk mengatur seluruh konten HTML dari elemen yang dipilih. Semua tag HTML yang diberikan sebagai input akan di-render sebagai HTML. Ini sangat berguna untuk menambahkan struktur atau elemen baru secara dinamis.
Sintaks:
$(selector).html("<strong>Konten HTML baru</strong>");
Contoh Praktik:
Mari kita ubah contoh sebelumnya untuk menggunakan .html():
<!DOCTYPE html>
<html>
<head>
<title>Set HTML jQuery</title>
</head>
<body>
<p id="paragrafAsli">Ini adalah teks asli.</p>
<button id="gantiHTML">Ganti HTML</button>
<p id="pesan"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#gantiHTML").click(function(){
// Mengubah konten HTML dari elemen <p>
$("#paragrafAsli").html("Teks ini sudah diganti oleh <strong>jQuery</strong>!");
// Menampilkan pesan bahwa perubahan berhasil
$("#pesan").text("HTML berhasil diubah.");
});
});
</script>
</body>
</html>
Perhatikan bahwa sekarang kata “jQuery” akan menjadi bold karena tag <strong> di-render sebagai HTML.
3. .val(value): Mengatur Nilai (Value) Elemen Form
Metode .val() digunakan untuk mengatur nilai (value) dari elemen form seperti <input>, <select>, dan <textarea>. Ini sering digunakan untuk mengisi form secara otomatis atau mengatur nilai default.
Sintaks:
$(selector).val("Nilai baru");
Contoh Praktik:
<!DOCTYPE html>
<html>
<head>
<title>Set Value jQuery</title>
</head>
<body>
<form>
<label for="nama">Nama:</label><br>
<input type="text" id="nama" value="John Doe"><br><br>
<label for="kota">Kota Asal:</label><br>
<select id="kota">
<option value="jakarta">Jakarta</option>
<option value="bandung">Bandung</option>
<option value="malang">Malang</option>
<option value="surabaya">Surabaya</option>
</select>
</form>
<br>
<button id="aturNilai">Atur Nilai Default</button>
<p id="pesan"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#aturNilai").click(function(){
// Mengatur nilai input teks
$("#nama").val("Jane Smith");
// Mengatur nilai select option ke 'malang'
$("#kota").val("malang");
$("#pesan").text("Nilai input dan select berhasil diatur.");
});
});
</script>
</body>
</html>
Ketika tombol diklik, input Nama akan berubah menjadi “Jane Smith” dan pilihan “Kota Asal” akan otomatis terpilih “Malang”.
Fungsi Callback dalam Metode Set
Seperti halnya metode get, metode set juga bisa menerima fungsi sebagai parameter untuk menghasilkan nilai secara dinamis. Fungsi ini akan menerima dua argumen: index (indeks elemen dalam koleksi) dan currentValue (nilai/teks/HTML saat ini).
Contoh .text() dengan fungsi:
$("#paragrafAsli").text(function(index, originalText){
return "Teks baru di indeks " + index + ": " + originalText.toUpperCase();
});
Ini akan mengubah teks setiap paragraf yang dipilih menjadi format tertentu, menggunakan teks aslinya dan indeksnya.
Kesimpulan
Menguasai metode .text(), .html(), dan .val() baik untuk mengambil (get) maupun mengatur (set) nilai adalah fundamental dalam pengembangan web interaktif dengan jQuery. Dengan ini, kamu bisa membuat form yang lebih responsif, memperbarui konten halaman secara dinamis, dan banyak lagi.
Pada tutorial berikutnya, kita akan membahas cara memanipulasi atribut elemen. Selamat melanjutkan eksplorasi jQuery! 🚀
