Elementin tekstin muuttaminen jQueryllä

Edellisissä oppitunneissa opimme saamaan elementtiryhmän jQueryllä ja näimme jopa joitain esimerkkejä metodien toiminnasta. Nyt perehtymme niihin tarkemmin. Tässä oppitunnissa opimme muuttamaan elementin tekstin kahden metodin avulla: html ja text.

Ratkaistaan seuraava tehtävä: saamme kaikki elementit luokalla www ja samalla muutamme kaikille niille tekstin '!!!':ksi. Oletetaan, että meillä on seuraava HTML-koodi:

<p class="www">text</p>
<p class="www">text</p>
<p class="www">text</p>
<p>text</p>

Silloin JavaScript-koodi näyttää seuraavalta:

let elems = document.getElementsByClassName('www');

for (let i = 0; i < elems.length; i++) {
	elems[i].innerHTML = '!!!';
}

jQueryllä kaikki on paljon helpompaa: saamme kaikki elementit dollarin avulla, näin: $('.www'), ja sitten käytämme niihin metodia html, joka parametrina ottaa uuden tekstin - $('.www').html('new text'). Valmista! Tämä rivi tekee kaiken työn ilman silmukoita ja muuta roskaa. Käynnistä esimerkki ja varmista siitä itse:

$('.www').html('!!!');

Kaikille h3 -elementeille metodin html avulla aseta teksti '!!!'.