[jQuery] .text() - 선택한 요소의 내용을 반환, 변경하는 메서드

안녕하세요. 경제적, 시간적 자유를 꿈꾸는 한량입니다.

jQuery의 .text() 사용법

jQuery의 .text()는 HTML 요소의 텍스트 콘텐츠를 반환하거나,
해당 콘텐츠를 새로운 값으로 설정하는 데 사용됩니다.

 

.text() 함수는 선택한 요소의 자식 요소를 제외한 텍스트 콘텐츠만을 반환합니다. 
즉, HTML 태그를 제외한 순수한 텍스트만을 반환합니다. 
이를 통해, 선택한 요소의 내용을 편리하게 변경할 수 있습니다.

 

예를 들어, '#myDiv' 요소의 텍스트 콘텐츠를 가져오기 위해서는 

다음과 같이 jQuery 코드를 작성할 수 있습니다.

// javascript code
var text = $('#myDiv').text();

// html code
<div id="myDiv">
  <p>Hello, world!</p>
</div>

이 경우, 'text' 변수에는 "Hello, world!"라는 문자열이 저장됩니다. 

 

반대로, .text() 함수를 사용하여 해당 요소의 내용을 변경할 수도 있습니다. 

다음과 같은 코드를 사용하여 '#myDiv' 요소의

텍스트 콘텐츠를 'Goodbye, world!'로 변경할 수 있습니다.

// javascript code
$('#myDiv').text('Goodbye, world!');

// 변경된 html code
<div id="myDiv">
  <p>Goodbye, world!</p>
</div>

이렇게 함으로써, #myDiv 요소 내부의 <p> 요소는 유지한 채, 

텍스트 콘텐츠만을 변경할 수 있습니다.