Elemendi teksti muutmine jQuery-ga

Eelmistes õppetundides õppisime saama elementide rühma jQuery kaudu ja isegi nägime mõningaid näiteid meetoditega töötamisest. Nüüd võtame need üksikasjalikumalt läbi. Selles õppetükis õpime muutma elemendi teksti kahe meetodi abil: html ja text.

Lahendame järgmise ülesande: saame kõik elemendid klassiga www ja muudame samal ajal kõigile neile teksti '!!!'-ks. Olgu meil järgmine HTML kood:

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

Siis JavaScript kood näeb välja järgmine:

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

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

JQuery-ga on kõik palju lihtsam: saame kõik elemendid dollari abil, nii: $('.www'), ja seejärel rakendame neile meetodi html, mis parameetrina võtab uue teksti - $('.www').html('new text'). Kõik! See rida teeb kõige töö ilma tsükliteta ja muude jama. Käivita näide ja veendu isesellest:

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

Kõikidele h3-elementidele pange meetodi html abil tekstiks '!!!'.