JQuery memungkinkan pengembang web untuk menambah dan menghapus elemen HTML dengan mudah melalui metode-metode seperti “.append()”, “.prepend()”, “.before()”, “.after()”, dan “.remove()”.
Berikut adalah beberapa contoh penggunaan metode-metode tersebut:
- Menambah elemen baru sebagai anak dari elemen yang dipilih:
$("p").append("<b>Hello World</b>");
- Menambah elemen baru sebagai anak pertama dari elemen yang dipilih:
$("p").prepend("<b>Hello World</b>");
- Menambah elemen baru sebelum elemen yang dipilih:
$("p").before("<b>Hello World</b>");
- Menambah elemen baru setelah elemen yang dipilih:
$("p").after("<b>Hello World</b>");
- Menghapus elemen yang dipilih:
$("p").remove();
Dalam contoh di atas, metode “.append()”, “.prepend()”, “.before()”, “.after()”, dan “.remove()” digunakan untuk menambah dan menghapus elemen HTML pada halaman web.
Ini hanya beberapa contoh dari banyak metode yang tersedia dalam JQuery untuk menambah dan menghapus elemen HTML. Pengembang web dapat memilih metode yang sesuai dengan kebutuhan dan memanfaatkan metode-metode tersebut untuk membuat halaman web yang interaktif dan dinamis.
Contoh Full Kode
Berikut adalah contoh full kode menambah dan menghapus elemen HTML menggunakan JQuery:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("button#add").click(function(){
$("p").append("<b>Hello World</b>");
});
$("button#remove").click(function(){
$("p").remove();
});
});
</script>
</head>
<body>
<button id="add">Add</button>
<button id="remove">Remove</button>
<p>This is a paragraph.</p>
</body>
</html>
Dalam contoh di atas, kode JQuery menunggu halaman selesai dimuat menggunakan metode “.ready()”, lalu menangkap event “click” pada tombol “Add” dan menambah elemen <b> dengan teks “Hello World” sebagai anak dari elemen <p>. Kode JQuery juga menangkap event “click” pada tombol “Remove” dan menghapus elemen <p>.
