Manipulasi elemen HTML

Siapkan Halaman HTML Anda

Buatlah halaman HTML sederhana dengan beberapa elemen yang ingin Anda manipulasi. Contoh:

<!DOCTYPE html>
<html>
<head>
    <title>Manipulasi Elemen HTML dengan jQuery</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>Selamat Datang!</h1>
    <p>Ini adalah contoh manipulasi elemen HTML dengan jQuery.</p>
    <button id="ubah-teks">Ubah Teks</button>
</body>
</html>

Tambahkan Script jQuery

Tambahkan script jQuery di dalam elemen <head> Anda seperti yang terlihat di atas.

Manipulasi Elemen HTML

Tambahkan script jQuery di bawah elemen <script> Anda untuk melakukan manipulasi. Berikut adalah contoh mengubah teks pada elemen <h1> ketika tombol diklik:

<script>
    // Gunakan jQuery untuk menunggu dokumen HTML dimuat sepenuhnya
    $(document).ready(function() {
        // Pilih elemen dengan ID 'ubah-teks' (tombol)
        $('#ubah-teks').click(function() {
            // Ubah teks pada elemen <h1>
            $('h1').text('Selamat Datang di Tutorial jQuery!');
        });
    });
</script>

Jalankan Aplikasi Anda

Buka halaman HTML Anda di peramban web, dan Anda akan melihat tombol "Ubah Teks". Ketika tombol tersebut diklik, teks pada elemen <h1> akan berubah sesuai dengan script jQuery yang telah Anda tambahkan.

Ini hanya contoh sederhana dari bagaimana Anda dapat melakukan manipulasi elemen HTML dengan jQuery. Anda dapat melakukan berbagai tindakan lain seperti menambahkan atau menghapus elemen, mengganti atribut, dan lainnya menggunakan berbagai fungsi jQuery yang tersedia.

PREVIOUS
NEXT