sample jquery dom

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

<body>
    <!-- Ini untuk penerapan method addclass, removeclass dan chaining -->
    <button id="tombol-1">Add Class</button>
    <p id="p-1">Aku akan berubah warna</p>

    <button id="tombol-2">Remove Class</button>
    <p id="p-2" class="text-red">Aku akan berubah warna</p>

    <button id="tombol-3">Change Class</button>
    <p id="p-3" class="text-red">Aku akan berubah warna</p>

    <button id="tombol-4">Cek Class</button>
    <p id="p-4" class="text-red">Ini adalah teks</p>

    <!-- Ini untuk penerapan method text() -->
    <div class="box">
        <h1>Ini adalah Judul</h1>
        <p>Lorem ipsum dolor sit amet</p>
    </div>
    <!-- ini untuk penerapan method html() -->
    <div class="box-1"></div>

    <!-- Ini untuk penerapan method append() dan prepend() -->
    <div class="container">
        <div class="inner">Halo</div>
        <div class="inner">Gamelab</div>
    </div>

    <!-- ini adalah penerapan method remove() -->
    <button id="hapus">Remove</button>
    <div class="inner-1">Ini adalah konten pertama</div>
    <div class="inner-2">Ini adalah konten kedua (dihapus)</div>
    <style>
        /* class yang akan kita tambahkan pada teks */
        .text-red {
            color: red;
        }

        .text-underline {
            text-decoration: underline;
        }

        .inner {
            color: blueviolet;
        }

        .inner-2 {
            color:brown;
        }
    </style>

    <script>
        $('#tombol-1').click(function () {
            $('#p-1').addClass('text-red');
        });

        $('#tombol-2').click(function () {
            $('#p-2').removeClass('text-red');
        });

        $('#tombol-3').click(function () {
            $('#p-3').removeClass('text-red').addClass('text-underline');
        });

        $('#tombol-4').click(function () {
            alert($('#p-4').hasClass('text-red'));
        });

        $('.box h1').text('Ini adalah judul baru');
        $('.box-1').html('<h1 style="color:green;font-size:16px;">Ini adalah judul baru berikutnya</h1>')

        $('.container').append('<div class="inner">Indonesia</div>')
        $('.container').prepend('<div class="inner">Merdeka</div>')

        $('#hapus').click(function () {
            $('.inner-2').remove();
        });
    </script>

</body>

</html>