jQuery / Method / .text() - 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꾸는 메서드
.text()
.text()는 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꿉니다. .html()과 비슷하지만 태그의 처리가 다릅니다.
문법 1
.text()
선택한 요소 안의 내용을 가져옵니다. 태그는 가져오지 않습니다. 예를 들어
var jb = $( 'h1' ).text();
는 h1 요소의 내용을 변수 jb에 저장합니다.
문법 2
.text( textString )
이전 내용을 지우고 새로운 내용을 넣습니다. 예를 들어
$( 'div' ).html( '<h1>Lorem</h1>' );
는 div 요소의 내용을 <h1>Lorem</h1>로 바꿉니다. HTML 태그는 텍스트로 처리합니다.
예제 1
div 요소 안의 내용을 가져와서 그 내용을 출력합니다. div 요소가 여러 개 있으면 모든 내용을 가져옵니다. HTML 태그는 제외한다는 것에 주의합니다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> $( document ).ready( function() { var jbText = $( 'div' ).text(); alert( jbText ); } ); </script> </head> <body> <div> <h1>Lorem ipsum dolor.</h1> </div> <div> <h1>Aenean nec mollis.</h1> </div> </body> </html>
예제 2
div 요소 안의 내용을 지우고 새로운 내용을 넣습니다. div 요소가 여러 개 있으면 모든 요소에 적용됩니다. 삽입하는 내용에 있는 HTML 태그는 태그가 아니라 텍스트로 인식합니다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> $( document ).ready( function() { $( 'div' ).text( '<p>Aenean nec mollis.</p>' ); } ); </script> </head> <body> <div> <h1>Lorem ipsum dolor.</h1> </div> <div> <h1>Phasellus lacinia tempus.</h1> </div> </body> </html>