Metode load() adalah cara paling simpel dan cepat di jQuery untuk menyisipkan konten HTML dari file eksternal atau endpoint server langsung ke dalam wadah selektor.
Sintaks Standar:
$(selector).load(URL, data, completeCallback);
Metode load() adalah cara paling simpel dan cepat di jQuery untuk menyisipkan konten HTML dari file eksternal atau endpoint server langsung ke dalam wadah selektor.
$(selector).load(URL, data, completeCallback);
<!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; }
#kotakKonten { border: 2px dashed #94a3b8; padding: 20px; border-radius: 8px; background: white; margin-top: 15px; }
button { background: #0d2e5c; color: white; border: none; padding: 10px 18px; border-radius: 6px; cursor: pointer; }
</style>
</head>
<body>
<h3>Memuat Fragmen Konten Eksternal</h3>
<button id="btnLoadKonten">Muat Bagian Berita (.load)</button>
<div id="kotakKonten">Konten awal belum dimuat...</div>
<script>
$(document).ready(function() {
$('#btnLoadKonten').click(function() {
// Di server nyata: $('#kotakKonten').load('berita.html #headline');
$('#kotakKonten').html('<p style="color:#fca311;">Memuat fragmen berita...</p>');
setTimeout(function() {
$('#kotakKonten').html(`
<h4 style="color:#00758f; margin-top:0;">🚀 Pengumuman Beasiswa Skillance 2026</h4>
<p style="margin-bottom:0; color:#334155;">Pendaftaran jalur sertifikasi web developer resmi dibuka untuk mahasiswa dan umum!</p>
`);
}, 400);
});
});
</script>
</body>
</html>
Uji interaksi di atas untuk melihat bagaimana fragmen HTML dimuat secara otomatis ke dalam wadah.