In una delle prime lezioni, abbiamo visto come recuperare il contenuto degli elementi. Ora, vediamo come modificare il contenuto, utilizzando i metodi .text(), .html() e .val().
Per modificare il contenuto di un elemento HTML, si possono utilizzare due metodi differenti: .text() e .html(). Vediamo a cosa servono e quali sono le loro sintassi:
$(elemento).text(nuovoTesto). Questo metodo serve per modificare il contenuto testuale dell'elemento. Il parametro nuovoTesto rappresenta il nuovo contenuto dell'elemento. Eventuali tag HTML verranno considerati testo normale.$(elemento).html(nuovoHTML). Questo metodo serve per modificare il contenuto HTML dell'elemento. Il parametro nuovoHTML rappresenta il nuovo contenuto HTML dell'elemento. Eventuali tag HTML verranno considerati come tali.Il metodo .text() modifica il contenuto testuale dell'elemento selezionato. Vediamo un esempio:
<p id="elemento">Questo testo è un esempio</p>
<button onclick="modifica()">Modifica testo</button>
<script>
function modifica(){
$("#elemento").text("Il nuovo testo");
}
</script>Nell'esempio, quando l'utente clicca sul pulsante, viene attivata la funzione modifica() (non conosci le funzioni? Vai alla lezione JavaScript).
Il metodo .html() modifica il contenuto di un elemento, tenendo conto anche dei tag HTML. Ecco un esempio con questo metodo jQuery:
<p id="elemento">Questo testo è un esempio</p>
<button onclick="modifica()">Modifica testo</button>
<script>
function modifica(){
$("#elemento").html("Il nuovo <b>testo</b> con i <i>tag</i>!");
}
</script>In questo caso, i tag vengono letti come tali e la scritta risulterà: "Il nuovo testo con i tag!". Se non conosci il linguaggio HTML, puoi andare al corso HTML di Biadets.
Il metodo .val() permette di modificare il valore inserito negli input dei form (non conosci i form? Prova a leggere la lezione sui form HTML).
La sintassi è la stessa dei metodi precedenti:
$(elemento).val(nuovoValore). Il nuovoValore è il valore inserito nell'input.
Vediamo un esempio:
<input type="text" id="input"><br>
<button>Modifica testo</button>
<script>
$("button").on("click", function() {
$("#input").val("Nuovo testo");
});
</script>Nell'esempio, con un evento di click (che potrai leggere più avanti nella lezione degli eventi del mouse), quando l'utente clicca sul pulsante "Modifica testo", il valore dell'input viene modificato.