Il metodo .html() del framework jQuery permette di immettere in maniera dinamica codice html  in un elemento esistente della pagina, inoltre il metodo è utilizzabile anche per leggere e prelevare il contenuto html di un elemento.

La duplice funzione che svolge ne fa un ottimo alleato in tutti quei casi in cui lo sviluppatore ha necessità di modificare “a volo” la pagina web, in relazione ad esempio ad un azione dell’utente o ad una chiamata Ajax.

In questo articolo analizzeremo l’utilizzo del metodo html() nei seguenti casi:

• prelevare il contenuto di un elemento della pagina;
• sovrascrivere il contenuto di un elemento della pagina;
• aggiungere contenuti ad un elemento della pagina;
• modifica di elementi da chiamata Ajax;
• modifica contemporanea del contenuto di più elementi.

Vediamo subito la sintassi base del metodo html():

$('#id_blocco').html();

Con questa semplice linea di codice stiamo accedendo, tramite ID, al contenuto di un blocco HTML. Possiamo, partendo da questa istruzione base, creare una funzione parametrizzata che restituisce a video il codice HTML contenuto in un elemento:

function GetHtml(id){
    var codice = $('#'+id).html();
    alert('Il codice HTML è:\n\n'+codice);
}

La funzione GetHtml(id) stampa, tramite un alert, il codice HTML prelevato tramite il metodo .html(). Possiamo pensare di personalizzare questa funzione per rendere le nostre pagine più dinamiche e le possibilità sono svariate.
Ma, come detto in fase di introduzione all’articolo, il metodo .html() permette anche di modificare il contenuto di un elemento della pagina. La sintassi è molto semplice, basta aggiungere un parametro in input al metodo:

$('#id_blocco').html(new_codice);

La varibile “new_codice” conterrà il nuovo codice HTML da applicare all’elemento selezionato tramite ID. In alternativa è possibile accodare il codice della variabile “new_codice” a quello esistente, senza quindi sovrascrivvere quello esistente:

var codice_attuale = $('#id_blocco').html();
$('#id_blocco').html(codice_attuale+new_codice);

Possiamo racchiudere queste linee di codice in una funzione che chiameremo AddHtml, la quale opportunamente parametrizzata permetta di aggiungere contenuti ad un elemento della pagina. La funzione può tornare molto utile in tutti quei casi in cui lo sviluppatore ha necessità di “completare” la pagina in step successivi:

function AddHtml(id,codice_html){
    var codice_attuale = $('#'+id).html();
    $('#'+id).html(codice_attuale+codice_html);
}

Per migliorare la funzione precedente è necessario introdurre Ajax (leggi articolo Ajax con jQuery). Il nuovo codice HTML sarà generato da uno script lato server, opportunamente richiamato:

function SetHtmlAjax(id){
    $.ajax({
     type: "GET",
     dataType: "html",
     cache: false,
     url: "data.php",
     data: "",
     success: function(msg){
        $('#'+id).html(msg);
     }
     });
}

La funzione, una volta invocata, effettua una chiamata Ajax ad uno script (nel nostro esempio data.php) che dopo opportune elaborazioni genera ed invia al client una porzione di codice HTML. Sarà compito del metodo .html() di jQuery sovrascrivere il contenuto del blocco identificato tramite ID. Eventualmente è possibile modificare la funzione in modo tale che aggiunga il codice invece di sovrascriverlo.

Infine vediamo come il metodo .html() risulti utile e immediato per aggiornare il contenuto di più elementi contemporaneamente:

$('div').html('Nuovo contenuto');

$('h1').html('Nuovo titolo');

Possiamo modificare il contenuto di tutti i blocchi di tipo DIV oppure i titoli di livello H1 e così via.
Le funzioni viste sono state raccolte in una pagina web d’esempio.

Cliccando qui è possibile vedere in azione il codice.

Cliccando qui è possibile scaricare il codice.