Metodo html
Il metodo html permette di modificare il testo
di un elemento e di ottenerlo insieme ai tag.
Sintassi
Ottenere il testo:
$(selettore).html();
Modificare il testo:
$(selettore).html(nuovo testo);
Informazioni aggiuntive
Il metodo html può applicare una funzione
specificata a ogni elemento nel set.
In questo caso, la funzione riceve come primo parametro
l'indice dell'elemento nel set, e come secondo parametro
- il testo corrente dell'elemento:
$(selettore).html(function(indice nel set, testo corrente dell'elemento));
I nomi delle variabili nella funzione possono essere qualsiasi.
Ad esempio, se per il primo parametro diamo il nome
index - allora all'interno della nostra funzione sarà disponibile
la variabile index, che conterrà l'indice nel set
per l'elemento che la funzione sta elaborando
in quel momento. Analogamente, se per il secondo
parametro diamo, ad esempio, il nome value - allora
all'interno della nostra funzione sarà disponibile la variabile value,
che conterrà il testo dell'elemento che la funzione
sta elaborando in quel momento:
$(selettore).html(function(index, value) {
// qui sono disponibili le variabili index e value
});
Il testo di ogni elemento cambierà in quello che la funzione restituirà specificamente per quell'elemento.
Esempio
Visualizziamo il contenuto del nostro paragrafo:
<p id="test">testo</p>
let text = $('#test').html();
alert(text);
Esempio
Cambiamo il contenuto del nostro paragrafo:
<p id="test">testo1</p>
$('#test').html('testo2');
Il codice HTML diventerà così:
<p id="test">testo2</p>
Esempio
Cambiamo il contenuto del nostro paragrafo con testo e tag:
<p id="test">testo1</p>
$('#test').html('<span>testo2</span>');
Il codice HTML diventerà così:
<p id="test"><span>testo2</span></p>
Esempio
Aggiungiamo alla fine di ogni paragrafo il suo numero d'ordine nel set:
<p>testo</p>
<p>testo</p>
<p>testo</p>
$('p').html(function(index, value){
return value + ' ' + index;
});
Il codice HTML diventerà così:
<p>testo 0</p>
<p>testo 1</p>
<p>testo 2</p>
