- 1. Mengubah dan Mengambil Teks (.text())
- 2. Mengubah dan Mengambil HTML (.html())
- 3. Mengubah dan Mengambil Nilai Input (.val())
- Contoh Lengkap HTML + jQuery
- Kesimpulan
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())
-
Mengubah teks:
$("#judul").text("Selamat Datang!"); -
Mengambil teks:
let isi = $("#judul").text(); console.log(isi);
2. Mengubah dan Mengambil HTML (.html())
-
Mengubah isi HTML:
$("#konten").html("<strong>Ini teks tebal</strong>"); -
Mengambil isi HTML:
let isiHtml = $("#konten").html(); console.log(isiHtml);html()akan membaca atau menulis konten termasuk tag HTML di dalamnya.
3. Mengubah dan Mengambil Nilai Input (.val())
Untuk elemen seperti <input>, <textarea>, atau <select>, kita bisa pakai .val().
-
Mengisi nilai:
$("#nama").val("John Doe"); -
Mengambil nilai:
let nama = $("#nama").val(); console.log(nama);
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
Artikel ini dibaca sebanyak 980 kali
SAWERIA
Memuat komentar...