jQueryを使用した要素のテキスト変更

前回のレッスンでは、jQueryを通じて要素のグループを取得する方法を学び、 いくつかのメソッドの使用例も見ました。今回はそれらについてより詳しく見ていきます。 このレッスンでは、2つのメソッド：html と textを使用して要素のテキストを変更する方法を学びます。

次の課題を解決しましょう：クラスwwwを持つ全ての要素を取得し、 同時にそれらのテキストを'!!!'に変更します。次のようなHTMLコードがあるとします：

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

その場合、JavaScriptコードは次のようになります：

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

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

jQueryを使用すると、すべてがはるかに簡単になります：$('.www')のように ドル記号を使ってすべての要素を取得し、次にhtmlメソッドを 適用します。このメソッドはパラメータとして新しいテキスト$('.www').html('new text')を受け取ります。 以上です！この一行が、ループやその他の余計なものなしですべての作業を実行します。 例を実行して、自分で確認してください：

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