Ændring af elementtekst via jQuery
I de foregående lektioner lærte vi at hente
en gruppe elementer via jQuery og så endda nogle
eksempler på arbejde med metoder. Nu
vil vi se nærmere på dem. I denne lektion
vil vi lære at ændre tekst på et element ved hjælp af to
metoder: html og
text.
Lad os løse følgende opgave: hent alle elementer
med klassen www og samtidig ændre
teksten for dem alle til '!!!'. Lad os sige, at vi har
følgende HTML-kode:
<p class="www">text</p>
<p class="www">text</p>
<p class="www">text</p>
<p>text</p>
Så vil JavaScript-koden se sådan ud:
let elems = document.getElementsByClassName('www');
for (let i = 0; i < elems.length; i++) {
elems[i].innerHTML = '!!!';
}
Med jQuery er det meget nemmere: vi henter
alle elementer med dollar-tegnet, sådan her:
$('.www'), og derefter anvender vi metoden
html på dem,
som accepterer den nye tekst som parameter -
$('.www').html('new text'). Det er alt! Denne
linje udfører alt arbejdet uden loops og
andet rod. Kør eksemplet og se det selv:
$('.www').html('!!!');
Sæt teksten '!!!' for alle h3
ved hjælp af metoden html.