html-metodi
html -metodin avulla voit muuttaa elementin
tekstiä ja saada sen yhdessä tunnisteiden kanssa.
Syntaksi
Tekstin saaminen:
$(valitsin).html();
Tekstin muuttaminen:
$(valitsin).html(uusi teksti);
Lisätietoja
html -metodi voi soveltaa annettua
toimintoa jokaiseen elementtiin joukossa.
Tässä tapauksessa funktio saa ensimmäisenä parametrina
elementin numeron joukossa ja toisena parametrina
- elementin nykyisen tekstin:
$(valitsin).html(function(numero joukossa, elementin nykyinen teksti));
Muuttujien nimet funktiossa voivat olla mitä tahansa.
Esimerkiksi, jos ensimmäiselle parametrille annamme nimen
index - silloin funktiomme sisällä on käytettävissä
muuttuja index, jossa on numero joukossa
kyseiselle elementille, jota funktio käsittelee
tällä hetkellä. Vastaavasti, jos toiselle
parametrille annamme esimerkiksi nimen value - silloin
funktiomme sisällä on käytettävissä muuttuja value,
jossa on elementin teksti, jota funktio
käsittelee tällä hetkellä:
$(valitsin).html(function(index, value) {
// tässä ovat käytettävissä muuttujat index ja value
});
Jokaisen elementin teksti muuttuu sellaiseksi, jonka funktio palauttaa kyseiselle elementille.
Esimerkki
Otetaan esille kappaleemme sisältö:
<p id="test">teksti</p>
let text = $('#test').html();
alert(text);
Esimerkki
Muutetaan kappaleemme sisältöä:
<p id="test">teksti1</p>
$('#test').html('teksti2');
HTML-koodi näyttää tältä:
<p id="test">teksti2</p>
Esimerkki
Muutetaan kappaleemme sisältö tekstiksi tunnisteineen:
<p id="test">teksti1</p>
$('#test').html('<span>teksti2</span>');
HTML-koodi näyttää tältä:
<p id="test"><span>teksti2</span></p>
Esimerkki
Lisätään jokaiselle kappaleelle sen järjestysnumero joukossa loppuun:
<p>teksti</p>
<p>teksti</p>
<p>teksti</p>
$('p').html(function(index, value){
return value + ' ' + index;
});
HTML-koodi näyttää tältä:
<p>teksti 0</p>
<p>teksti 1</p>
<p>teksti 2</p>
