Halo teman-teman semuanya, di artikel keempat ini, kita akan membahas bagaimana cara memanipulasi isi dokumen HTML (DOM) menggunakan jQuery, lebih spesifiknya: mengubah teks, HTML, dan nilai input (value).
Kemampuan ini penting banget karena hampir semua aplikasi web butuh interaksi dengan konten halaman. Misalnya: mengganti teks tombol, menampilkan pesan ke user, atau mengisi nilai di form secara dinamis.
1. Mengubah dan Mengambil Teks (.text())
2. Mengubah dan Mengambil HTML (.html())
3. Mengubah dan Mengambil Nilai Input (.val())
Untuk elemen seperti <input>, <textarea>, atau <select>, kita bisa pakai .val().
Contoh Lengkap HTML + jQuery
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Manipulasi DOM</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h2 id="judul">Judul Lama</h2>
<div id="konten">Ini konten awal.</div>
<input type="text" id="nama" value="Budi">
<button id="ubah">Ubah Isi</button>
<script>
$(document).ready(function() {
$("#ubah").click(function() {
$("#judul").text("Judul Baru");
$("#konten").html("<em>Konten sudah diperbarui.</em>");
$("#nama").val("Siti Aminah");
});
});
</script>
</body>
</html>
Penjelasan kode di atas, yaitu saat tombol diklik, teks judul akan berubah, HTML di dalam #konten akan diganti, dan nilai input akan diisi ulang.
Kesimpulan
Di artikel ini kita sudah belajar cara memanipulasi isi halaman (DOM) menggunakan jQuery dengan tiga method utama: .text(), .html(), dan .val(). Ini adalah dasar yang sangat penting untuk membuat halaman yang interaktif dan dinamis.
Di seri berikutnya, kita akan membahas Event Handling di jQuery, seperti bagaimana menangani klik, hover, input, dan lain-lain.
Terima Kasih