jQuery를 통해 요소의 텍스트 변경하기

이전 강의에서 우리는 jQuery를 통해 요소 그룹을 가져오는 방법을 배웠고, 일부 메서드 작업 예제도 살펴보았습니다. 이제 이들에 대해 더 자세히 알아보겠습니다. 이 강의에서는 두 가지 메서드, html와 text를 사용하여 요소의 텍스트를 변경하는 방법을 배울 것입니다.

다음 문제를 해결해 보겠습니다: 클래스 www를 가진 모든 요소를 가져와 동시에 그들의 텍스트를 '!!!'로 변경합니다. 다음과 같은 HTML 코드가 있다고 가정합니다:

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

그러면 JavaScript 코드는 다음과 같을 것입니다:

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

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

jQuery를 사용하면 모든 것이 훨씬 간단해집니다: 달러 기호를 사용하여 모든 요소를 가져옵니다, 다음과 같이: $('.www'), 그리고 나서 html 메서드를 적용합니다. 이 메서드는 매개변수로 새 텍스트를 받습니다 - $('.www').html('new text'). 그게 전부입니다! 이 한 줄은 모든 루프와 기타 불필요한 작업 없이 모든 작업을 수행합니다. 예제를 실행하고 직접 확인해 보세요:

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

모든 h3 요소에 대해 html 메서드를 사용하여 텍스트를 '!!!'로 설정하세요.