Ändra textinnehåll i ett element med jQuery

I tidigare lektioner lärde vi oss hur man hämtar en grupp element via jQuery och såg till och med några exempel på hur man arbetar med metoder. Nu ska vi gå igenom dem mer i detalj. I den här lektionen kommer vi att lära oss hur man ändrar textinnehållet i ett element med hjälp av två metoder: html och text.

Låt oss lösa följande problem: vi hämtar alla element med klassen www och ändrar samtidigt textinnehållet för alla till '!!!'. Låt oss anta att vi har följande HTML-kod:

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

Då kommer JavaScript-koden att se ut så här:

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

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

Med jQuery blir allt mycket enklare: vi hämtar alla element med hjälp av dollar-tecknet, så här: $('.www'), och sedan applicerar vi metoden html på dem, som accepterar den nya texten som en parameter - $('.www').html('new text'). Klart! Den här raden kommer att utföra allt arbete utan några loopar eller andra struntigheter. Kör exemplet och se det själv:

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

Sätt texten '!!!' för alla h3 med hjälp av metoden html.