Setelah mempelajari Selector jQuery, kini kita masuk ke tahap yang lebih praktis, yaitu Manipulasi HTML dengan jQuery. Pada bab ini, Anda akan belajar cara mengubah teks, HTML, atribut, dan value elemen secara dinamis tanpa me-refresh halaman.
Manipulasi HTML merupakan fitur utama jQuery yang sering digunakan dalam pembuatan website interaktif dan aplikasi web.
Contents
- 1 Apa Itu Manipulasi HTML di jQuery?
- 2 Mengubah Teks dengan .text()
- 3 Mengubah HTML dengan .html()
- 4 Mengambil dan Mengubah Value Input dengan .val()
- 5 Menambah Konten HTML
- 6 Menghapus Elemen HTML
- 7 Manipulasi Atribut HTML
- 8 Manipulasi Class CSS
- 9 Contoh Lengkap Manipulasi HTML jQuery
- 10 Kesalahan Umum dalam Manipulasi HTML
- 11 Kesimpulan
Apa Itu Manipulasi HTML di jQuery?
Manipulasi HTML jQuery adalah proses mengubah isi, struktur, dan atribut elemen HTML menggunakan method jQuery.
Struktur dasar:
$(selector).method();
Mengubah Teks dengan .text()
Method .text() digunakan untuk mengubah atau mengambil teks dari elemen HTML.
Contoh:
$("#judul").text("Belajar jQuery Manipulasi HTML");
Mengubah HTML dengan .html()
Method .html() digunakan untuk mengubah isi HTML, termasuk tag di dalamnya.
Contoh:
$("#konten").html("<b>Konten ini diubah dengan jQuery</b>");
Mengambil dan Mengubah Value Input dengan .val()
Method .val() digunakan untuk input, textarea, dan select.
Contoh:
$("#nama").val("Andi");
Menambah Konten HTML
jQuery menyediakan beberapa method untuk menambahkan elemen baru.
.append() dan .prepend()
$("#list").append("<li>Item Baru</li>");
$("#list").prepend("<li>Item Awal</li>");
.before() dan .after()
$("#box").before("<p>Sebelum box</p>");
$("#box").after("<p>Setelah box</p>");
Menghapus Elemen HTML
.remove() dan .empty()
$("#hapus").remove(); // menghapus elemen
$("#isi").empty(); // menghapus isi elemen
Manipulasi Atribut HTML
Menggunakan .attr()
$("img").attr("src", "gambar.jpg");
Menghapus Atribut
$("input").removeAttr("disabled");
Manipulasi Class CSS
Menambah, Menghapus, dan Toggle Class
$("#box").addClass("aktif");
$("#box").removeClass("aktif");
$("#box").toggleClass("aktif");
Contoh Lengkap Manipulasi HTML jQuery
<!DOCTYPE html>
<html>
<head>
<title>Manipulasi HTML jQuery</title>
</head>
<body>
<h1 id="judul">Judul Awal</h1>
<button id="btn">Ubah Judul</button>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$("#btn").click(function(){
$("#judul").text("Judul Berhasil Diubah!");
});
</script>
</body>
</html>
Kesalahan Umum dalam Manipulasi HTML
Beberapa kesalahan yang sering terjadi:
- ❌ Salah selector
- ❌ Menggunakan
.text()padahal butuh HTML - ❌ Lupa event handler
- ❌ Elemen belum dimuat
Solusi terbaik adalah menggunakan $(document).ready().
Kesimpulan
Pada Bab 5: Manipulasi HTML dengan jQuery, Anda telah mempelajari cara mengubah teks, HTML, value, atribut, dan class dengan mudah. Fitur ini sangat penting untuk membangun website yang interaktif dan dinamis.