Bab 5: Manipulasi HTML dengan jQuery – Ubah Konten & Atribut Secara Dinamis

Bab 5: Manipulasi HTML dengan jQuery – Ubah Konten & Atribut Secara Dinamis

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.

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.

Related Posts