Il metodo load() di jQuery è un metodo AJAX che permette di caricare del contenuto HTML esterno in un elemento della pagina corrente. Vediamone insieme i dettagli.
Supponiamo di avere un file HTML esterno così strutturato:
<h2>Test</h2>
<p id="test">...</p>
Possiamo caricare l'intera struttura in un elemento in questo modo:
$('#wrapper').load('test.html');
Ora il nostro elemento apparirà così:
<div id="wrapper">
<h2>Test</h2>
<p id="test">...</p>
</div>
Con questo metodo possiamo anche specificare l'elemento HTML esterno da caricare aggiungendo un selettore dopo il nome del file HTML:
$('#wrapper').load('test.html #test');
Ora il nostro elemento apparirà così:
<div id="wrapper">
<p id="test">...</p>
</div>
Se usate degli stili CSS nella pagina esterna, non sempre questi verranno caricati nella pagina di destinazione. Infatti non tutti i browser sono in grado di clonare gli stili presenti nel file esterno. Per questo motivo se ne sconsiglia l'uso.