jQuery HTML/CSS

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>
        body { font-family: sans-serif; padding: 20px; background: #f8fafc; }
        .kontainer { background: white; padding: 20px; border: 2px dashed #94a3b8; border-radius: 8px; margin-bottom: 15px; }
        button { background: #00758f; color: white; border: none; padding: 8px 12px; border-radius: 6px; cursor: pointer; margin: 3px; }
        .teks-emas { color: #fca311 !important; font-weight: bold; font-size: 20px; }
    </style>
</head>
<body>
    <h3>Meja Kerja DOM Skillance</h3>
    <div class="kontainer" id="areaTarget">
        <p id="paragrafUtama">Ini adalah paragraf konten awal.</p>
    </div>

    <div>
        <button id="btnText">.text('Baru')</button>
        <button id="btnHtml">.html('&lt;b&gt;Tebal&lt;/b&gt;')</button>
        <button id="btnAppend">.append(' ⭐')</button>
        <button id="btnToggleClass">.toggleClass()</button>
        <button id="btnEmpty" style="background:#ef4444;">.empty()</button>
    </div>

    <script>
        $(document).ready(function() {
            $('#btnText').click(function() { $('#paragrafUtama').text('Teks baru diubah via .text()'); });
            $('#btnHtml').click(function() { $('#paragrafUtama').html('<em>Konten baru berformat <strong>HTML</strong></em>'); });
            $('#btnAppend').click(function() { $('#paragrafUtama').append(' ⭐'); });
            $('#btnToggleClass').click(function() { $('#paragrafUtama').toggleClass('teks-emas'); });
            $('#btnEmpty').click(function() { $('#areaTarget').empty().append('<p>Kontainer telah dikosongkan!</p>'); });
        });
    </script>
</body>
</html>