In un articolo precedente abbiamo visto le potenzialità e gli usi pratici del metodo .html() di jQuery.
Esiste però un metodo che per certi aspetti somiglia molto a quello appena citato, sia per funzionalità che per sintassi, il metodo .text().

Questo metodo ci permette di leggere e scrivere il contenuto di un elemento HTML che compone la pagina. A differenza però di .html(), il metodo .text() accede esclusivamente ai textNode, operando quindi solo sul testo e tralasciando i tag HTML.
Chiariamo questo concetto introducendo la sintassi del metodo .text():

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

Con questa linea di codice stiamo accedendo ai contenuti testuali dell’elemento identificato tramite id. Se ad esempio avessimo un DIV così definito:

<div id='my_div'>
    Questo è un blocco di esempio.<br/>
    Contiene un elenco:
    <ul>
        <li>Voce 1</li>
        <li>Voce 2</li>
    </ul>
</div>

richiamando il metodo text() sul div con la seguente sintassi:

var testo = $('#my_div').text();

avvaloreremo la variabile “testo” con la seguente stringa:

Questo è un blocco di esempio. Contiene un elenco: Voce 1 Voce 2

Ciò che è importante notare è che il metodo restituisce esclusivamente i nodi di testo. I tag HTML non vengono considerati testo e dell’elenco che abbiamo definito è stato restuito solo il testo, quindi il contenuto dei tag <li>.

Come detto ad inizio articolo, il metodo .text() può essere utilizzato anche per scrivere testo all’interno di un blocco HTML. La sintassi è semplice e del tutto simile a quella del metodo .html():

$('#id_blocco').text('Testo da inserire');

Il metodo accetta come parametro una stringa, la quale verrà scritta all’interno dell’elemento identificato tramite ID.
Una caratteristica importante da tenere in considerazione è che l’istruzione precedente, se richiamata su un elemento contenente a sua volta altri elementi HTML, sovrascrive tutto il contenuto, realizzando quindi un semplice nodo di testo.
E’ interessante notare, inoltre, cosa accade quando la stringa in input al metodo contiene codice HTML, in questo caso il codice non verrà interpretato, bensì verrà convertito in una semplice stringa di testo.

Infine vediamo tre funzioni parametrizzate che utilizzano il metodo .text():

// Funzione che restituisce il testo contenuto in un elemento
function GetText(id){
    var testo = $('#'+id).text();
    alert('Il testo contenuto è:\n\n'+testo);
}
// Funzione che scrive un testo in un elemento
function SetText(id,testo){
    $('#'+id).text(testo);
}
// Funzione che aggiunge testo ad un elemento
function AddText(id,new_testo){
    var testo = $('#'+id).text();
    $('#'+id).text(testo+new_testo);
}

Nonostante il metodo .text() possa risultare meno utile del metodo .html(), offre molteplici spunti progettuali.
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.