La scorsa volta abbiamo visto come selezionare un elemento all'interno della pagina HTML con jQuery. Ma com'è possibile recuperare il contenuto di un elemento? Lo vediamo in questa lezione.
I metodi .text() e .html()
Per recuperare il contenuto di un elemento HTML, si possono utilizzare due metodi differenti: .text() e .html(). Vediamo a cosa servono:
$(elemento).text() recupera il contenuto di testo dell'elemento.$(elemento).html() recupera il codice HTML e il contenuto dell'elemento.Vediamoli in dettagli.
Il metodo .text()
Il metodo .text() recupera il contenuto testuale dell'elemento selezionato. Vediamo un esempio:
<p id="elemento">Questo testo è un esempio</p>
<script>
var testo = $("#elemento").text();
alert(testo); // "Questo testo è un esempio"
</script>Nella variabile testo verrà salvato il contenuto di testo dell'elemento <p> e viene visualizzato utilizzando il popup di alert (non lo conosci? Leggi la lezione JavaScript dedicata).
Il metodo .html()
Il metodo .html() recupera invece il contenuto HTML di un elemento, quindi anche i tag HTML insieme al testo. Ecco un esempio con questo metodo jQuery:
<p id="elemento">Questo <i>testo</i> è un <b>esempio</b></p>
<script>
var testo = $("#elemento").html();
alert(testo); // "Questo <i>testo</i> è un <b>esempio</b>"
</script>In questo caso, viene salvato nella variabile testo sia il contenuto testuale dell'elemento, sia i tag HTML (nell'esempio, <i> e <b>).
Esempio di .text() e .html()
Vediamo un esempio di .text() e .html() in una pagina HTML con jQuery.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#visualizzaContenuto").click(function() {
// Recupera il testo e l'HTML all'interno dell'elemento con id "contenitore"
var testo = $("#contenitore").text();
var html = $("#contenitore").html();
// In questo caso, li stamperemo in un alert
alert("Testo:\n" + testo + "\n\nHTML:\n" + html);
});
});
</script>
</head>
<body>
<div id="contenitore">
<p>Questo è un testo davvero interessante.</p>
</div>
<button id="visualizzaContenuto">Clicca qui</button>
</body>
</html>Ecco come funziona questo esempio:
$(document).ready() .click() di jQuery è utilizzato per creare una funzione che verrà eseguita quando l'utente clicca sul pulsante con l'ID "visualizzaContenuto". Vedremo in dettaglio gli eventi jQuery nella lezione degli eventi del mouse..text() e .html() di jQuery per recuperare il testo e l'HTML dall'elemento con l'ID "contenitore".alert. Utilizziamo \n per andare a capo.Il metodo .val() permette di recuperare i valori degli input dei form HTML. Ad esempio, si può recuperare il valore di una casella di testo inserita da un utente.
Vediamo un esempio:
<input type="text" id="input"><br>
<button>Recupera valore</button><br>
<span></span>
<script>
$("button").on("click", function() {
var input = $("#input").val();
$("span").text("Hai inserito: "+input);
});
</script>Nell'esempio, con un evento di click (che vedremo più avanti nella lezione degli eventi del mouse), quando l'utente clicca sul pulsante "Recupera valore", il valore dell'input viene salvato nella variabile input e inserito in <span> tramite .text() (che vedremo nella lezione su come cambiare il contenuto degli elementi).