Materi
Roadmap
Proyek
Sertifikat
Skillance Code Lab
Jalankan »
Skillance Code Lab Editor
Editor
Hasil
Split
Editor Kode Sumber
Tekan
Ctrl + Enter
untuk Menjalankan
<!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('<b>Tebal</b>')</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>
Hasil Tampilan (Browser Preview)
Muat Ulang