Il metodo html() di jQuery

Con jQuery posso leggere il contenuto tra un tag di apertura e di chiusura del documento html tramite il metodo html().

elemento.html()

Questo metodo preleva tutto ciò che è compreso tra il tag di apertura e di chiusura dell'elemento, compresi gli altri tag.

Mi permette anche di modificare il contenuto dell'elemento indicando il nuovo tra le parentesi tonde.

elemento.html(new)

Il funzionamento del metodo html() è simile al metodo text().

Nota. Tra i metodi text() e html() ci sono importanti differenze. Il metodo text() prende soltanto il testo ed elimina gli eventuali altri tag html presenti tra i due tag. Il metodo html() invece li preleva tali e quali.

Un esempio pratico

Ho un documento html con un paragrafo <p>.

<html>
<body>
<p>Questa è una <b>prova</b> di utilizzo di jQuery</p>
</body>
</html>

All'interno del paragrafo la parola prova è posta in grassetto con il tag <b>.

Ora, uso il metodo html() di jQuery per leggere il contenuto dei paragrafi <p>.

var k=$("p").html();

Il valore assegnato alla variabile k è

k="Questa è una <b>prova</b> di utilizzo di jQuery"

Lo script jQuery ha letto tutto ciò che è contenuto tra <p> e </p>, compresi i tag <b> e </b>

Nota. Se avessi usato il metodo text() lo script avrebbe letto soltanto il testo ossia "Questa è una prova di utilizzo di jQuery".

Come modificare il contenuto dell'elemento con jQuery

Per cambiare il contenuto di un elemento html indico il nuovo tra le parentesi tonde di html().

elemento.html(new)

Può trattarsi di una stringa o di una variabile stringa.

Un esempio pratico

In questo documento html c'è un paragrafo.

<html>
<body>
<p>Questa è una <b>prova</b> di utilizzo di jQuery</p>
</body>
</html>

Voglio modificare il contenuto tra <p> e </p> inserendo il messaggio "Questa <b>non</b> è una prova".

Posso farlo usando il metodo html()

$("p").html("Questa <b>non</b> è una prova");

Dopo l'esecuzione dello script il contenuto del pagrafo è il seguente:

<p>Questa <b>non</b> è una prova</p>

Il browser aggiorna dinamicamente il contenuto nel documento html.

E così via.

 


 

Segnalami un errore, un refuso o un suggerimento per migliorare gli appunti

FacebookTwitterLinkedinLinkedin
knowledge base

jQuery