Come leggere o modificare il contenuto di un elemento in jQuery
Il metodo text() in jQuery mi permette di leggere o modificare il contenuto testuale di un elemento del documento html
Un esempio pratico
In questo documento html lo script attende che l'utente faccia un click (evento) sull'elemento css #clickme (id=clickme).
<!DOCTYPE html>
<html>
<head>
<style>
#box { width:100px; height:100px; text-align:center; background:#f00; font-size:14px; }
#clickme { width:100px; border:1px solid #000; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div id="clickme">Click here</div>
<p>1</p>
<p>2</p>
<p>3</p>
<script>
$( "#clickme" ).click(function() {
document.write($("#clickme").text());
});
</script>
</body>
</html>
Quando l'utente clicca sull'elemento #clickme, lo script legge il contenuto dell'elemento #clickme tramite il metodo text()
In questo caso il contenuto dell'elemento #clickme è la stringa "Click here".
Quindi, l'output stampa a video "Click here".
Nota. Se scrivessi $("p").text() lo script leggerebbe il contenuto di tutti gli elementi della pagina. In questo caso ci sono tre tag <p> restituendo la concatenazione del loro contenuto ossia 123.
Per modificare il contenuto di un elemento mi basta indicare il nuovo contenuto tra le parentesi tonde.
<!DOCTYPE html>
<html>
<head>
<style>
#box { width:100px; height:100px; text-align:center; background:#f00; font-size:14px; }
#clickme { width:100px; border:1px solid #000; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div id="clickme">Click here</div>
<p>1</p>
<p>2</p>
<p>3</p>
<script>
$( "#clickme" ).click(function() {
$("#clickme").text("clicca qui");
});
</script>
</body>
</html>
In questo caso, quando l'utente clicca sull'elemento #clickme, lo script scrive "clicca qui" nell'elemento usando il metodo text("clicca qui").
Nota. Se scrivessi $("p").text("clicca qui") lo script modificherebbe il contenuto di tutti gli elementi <p> della pagina scrivendo in ciascuno di essi la stringa "clicca qui".
E così via.
