Fabio Donatantonio

Resta connesso

Software Developer / Adjunct Professor

JQuery, il metodo .html()

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.

Fabio Donatantonio

Fabio Donatantonio. Analista e sviluppatore full-stack di applicazioni web in linguaggio PHP. Professore a Contratto per le cattedre di Fondamenti di Informatica e Archivistica Digitale presso Università degli Studi eCampus. Dal 2008 curatore del sito www.donatantonio.net, da sempre appassionato di programmazione, mare, sigari e... musica.

1 Comment

  1. JQuery, il metodo .text() | Fabio Donatantonio

    18th Lug 2011 - 23:38

    […] un articolo precedente abbiamo visto le potenzialità e gli usi pratici del metodo .html() di jQuery. Esiste però un […]

Leave a reply

Your email address will not be published. Required fields are marked *

 

Didattica

Università degli Studi eCampus
Data Evento
05/07/2019
11:30
Esame Archivistica Digitale e Informatica per le Scienze Umane - Cds Filologia Moderna - Lettere - Novedrate(CO)
05/07/2019
11:30
Esame Introduzione all'Archivistica Digitale e all'Informatica per le Scienze Umane - Cds Letteratura, Arte, Musica e Spettacolo - Lettere - Novedrate(CO)
05/07/2019
11:30
Esame Abilità Informatiche e Telematiche - Cds Design e Discipline della Moda - Lettere - Novedrate(CO)
12/07/2019
11:30
Esame Introduzione all'Archivistica Digitale e all'Informatica per le Scienze Umane - Cds Letteratura, Arte, Musica e Spettacolo - Lettere - Roma
12/07/2019
11:30
Esame Archivistica Digitale e Informatica per le Scienze Umane - Cds Filologia Moderna - Lettere - Roma
12/07/2019
11:30
Esame Abilità Informatiche e Telematiche - Cds Design e Discipline della Moda - Lettere - Roma
Risorse
Guida HTML/CSS per principianti (link)
Introduzione agli ipertesti (link)
Esercizi guidati in Java (link)
Intelligenza artificiale (link)
Libri
Fondamenti di Informatica (2011) (link)
Informatica per le Scienze Umane (2011) (link)
Fondamenti di Informatica (2014) (link)
Pagina Docente
uniecampus.it - Scheda Docente (link)
Contatti
fabio.donatantonio[at]uniecampus.it

JWhisper, sviluppato presso il Dipartimento di Informatica Applicata dell'Università degli Studi di Salerno:

Stay Connected

Twitter

Le mie foto

Foto di Fabio Donatantonio
×