Setelah menguasai cara memanipulasi elemen dengan efek dan chaining, kini saatnya kita belajar cara mengambil informasi dari elemen HTML. Dalam tutorial ini, kita akan fokus pada tiga metode utama jQuery untuk mendapatkan nilai, teks, dan HTML dari elemen di halaman web. Ini adalah kemampuan dasar yang sangat penting untuk memvalidasi form, menampilkan data, atau membuat interaksi yang lebih cerdas.
1. .text(): Mengambil Teks Saja
Metode .text() digunakan untuk mendapatkan konten teks dari sebuah elemen, mengabaikan semua tag HTML yang ada di dalamnya. Jika elemen berisi teks dan tag HTML, metode ini hanya akan mengembalikan teksnya saja.
Sintaks:
$(selector).text();
Contoh Praktik:
<!DOCTYPE html>
<html>
<head>
<title>Get Text jQuery</title>
</head>
<body>
<p id="paragraf">Ini adalah **teks** yang akan kita ambil.</p>
<button id="ambilTeks">Ambil Teks</button>
<p id="hasil"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#ambilTeks").click(function(){
// Mengambil teks dari elemen <p> dengan ID "paragraf"
let teksDiambil = $("#paragraf").text();
// Menampilkan hasil
$("#hasil").text("Teks yang diambil: " + teksDiambil);
});
});
</script>
</body>
</html>
Hasil yang akan ditampilkan adalah “Teks yang diambil: Ini adalah teks yang akan kita ambil.” Meskipun ada tag <strong> di dalam paragraf, tag tersebut tidak ikut diambil.
2. .html(): Mengambil Seluruh Konten HTML
Metode .html() berfungsi mirip dengan .text(), tetapi ia mengembalikan seluruh konten, termasuk tag HTML di dalamnya. Ini berguna jika kamu ingin mendapatkan struktur HTML lengkap dari sebuah elemen.
Sintaks:
$(selector).html();
Contoh Praktik:
Mari kita gunakan contoh yang sama dengan metode .text() sebelumnya, namun kita ganti dengan .html().
<!DOCTYPE html>
<html>
<head>
<title>Get HTML jQuery</title>
</head>
<body>
<p id="paragraf">Ini adalah **teks** yang akan kita ambil.</p>
<button id="ambilHTML">Ambil HTML</button>
<p id="hasil"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#ambilHTML").click(function(){
// Mengambil seluruh konten HTML dari elemen <p>
let htmlDiambil = $("#paragraf").html();
// Menampilkan hasilnya. Perhatikan bahwa tag <strong> ikut terbawa.
$("#hasil").text("HTML yang diambil: " + htmlDiambil);
});
});
</script>
</body>
</html>
Hasil yang akan ditampilkan adalah “HTML yang diambil: Ini adalah teks yang akan kita ambil.”. Tag <strong> ikut terbawa dalam string.
3. .val(): Mengambil Nilai (Value) Elemen Form
Metode .val() adalah metode khusus yang digunakan untuk mendapatkan nilai dari elemen form, seperti <input>, <select>, dan <textarea>. Metode ini tidak berfungsi pada elemen non-form seperti <div> atau <span>.
Sintaks:
$(selector).val();
Contoh Praktik:
<!DOCTYPE html>
<html>
<head>
<title>Get Value jQuery</title>
</head>
<body>
<form>
<label for="nama">Nama:</label><br>
<input type="text" id="nama" value="John Doe"><br><br>
<label for="profesi">Pilih Profesi:</label><br>
<select id="profesi">
<option value="programmer">Programmer</option>
<option value="designer">Designer</option>
<option value="manager">Manager</option>
</select>
</form>
<br>
<button id="ambilNilai">Ambil Nilai</button>
<p id="hasilNama"></p>
<p id="hasilProfesi"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#ambilNilai").click(function(){
// Mengambil nilai dari input teks
let nama = $("#nama").val();
// Mengambil nilai dari select option
let profesi = $("#profesi").val();
$("#hasilNama").text("Nilai nama: " + nama);
$("#hasilProfesi").text("Nilai profesi: " + profesi);
});
});
</script>
</body>
</html>
Ketika tombol diklik, halaman akan menampilkan “Nilai nama: John Doe” dan “Nilai profesi: programmer” (tergantung opsi yang dipilih).
Ringkasan dan Perbedaan Penting
| Metode | Deskripsi | Target Elemen | Contoh Elemen |
.text() |
Mengambil konten teks saja (mengabaikan tag HTML). | Elemen apa pun. | <p>, <h1>, <span>, <div> |
.html() |
Mengambil seluruh konten, termasuk tag HTML. | Elemen apa pun. | <p>, <h1>, <span>, <div> |
.val() |
Mengambil nilai dari elemen form. | Elemen form. | <input>, <select>, <textarea> |
Memahami perbedaan antara ketiga metode ini adalah kunci untuk memanipulasi data di halaman web secara efektif. Pada tutorial berikutnya, kita akan belajar bagaimana mengatur nilai dan konten elemen menggunakan metode-metode ini.
Selamat bereksperimen! 🎉
