.text()
.text()는 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꿉니다. .html()과 비슷하지만 태그의 처리가 다릅니다.
문법 1
.text()선택한 요소 안의 내용을 가져옵니다. 태그는 가져오지 않습니다. 예를 들어
var jb = $( 'h2' ).text();는 h2 요소의 내용을 변수 jb에 저장합니다.
문법 2
.text( textString )이전 내용을 지우고 새로운 내용을 넣습니다. 예를 들어
$( 'div' ).html( '<h2>Lorem</h2>' );는 div 요소의 내용을 <h2>Lorem</h2>로 바꿉니다. 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> <h2>Lorem ipsum dolor.</h2> </div> <div> <h2>Aenean nec mollis.</h2> </div> </body> </html>예제 2
div 요소 안의 내용을 지우고 새로운 내용을 넣습니다. div 요소가 여러 개 있으면 모든 요소에 적용됩니다. 삽입하는 내용에 있는 HTML 태그는 태그가 아니라 텍스트로 인식합니다.
참고
- jQuery / Method / .html()
< 속성의 값 가져오기 >
- html() : 해당하는 요소의 가장 처음 대상의 값만 가져옴
· 요소의 자식 태그들의 태그나 문자열을 모두 읽어옴
- text() : 해당하는 모든 요소의 값을 가져옴
· 단순 text로 읽어옴
① 속성의 값 출력하기
$(function(){ var ht = $('h2').html(); alert(ht+"@@@@"); var tx = $('h2').text(); alert(tx); });<h2>head-0</h2> <h2>head-1</h2> <h2>head-2</h2>· <h2>의 맨 처음 값만 가져온다.
· <h2>의 값 전부를 가져온다.
② 속성의 값 변경하기
- 변경하고자 하는 텍스트를 ( )안에 넣어주면 된다.
$('h2').text("hello");<body> <h2>head-0</h2> <h2>head-1</h2> <h2>head-2</h2> </body>- 속성 값에 연결연산자(+)를 이용하여 붙여줄 수도 있다.
$('h2').text(ht+"@@@@");· 여기서 ht는 위에 코드블럭에 있듯이 $('h2').html() 값이다.
- html()도 text()와 마찬가지로 값을 변경가능하다
$('h2').html("안녕하세요");③ 속성 값 변경시 html()과 text() 차이
- html( ) : 태그 등 해당 요소를 적용해서 변경
- text( ) : 텍스트 그대로 받아들여서 새로운 텍스트로 변경
$('div').html("<h3>html Method() 사용</h3>"); $('div').text("<h3>text Method() 사용</h3>");<div>0000</div> <div>1111</div> <div>2222</div>· html()은 "<h3>"을 실제 태그로 인식을 해서 html Method() 사용이라는 글자에 적용했음
· text()는 " " 안에 들어있는 모든 문자열을 텍스트로 인식해서 출력했음
④ html(), text() 안에 function 사용하기
- function(index, text)가 매개변수로 들어가야한다.
- div 안에 들어가는 값을 변경해보겠다. ( "인덱스 + ** + 기존의 문자 + @@" )
- index는 div의 순서로 0부터 시작한다
- text는 div의 값(정보)로 위에서 진행한 코드(<h3> ~~ Method() 사용 </h3>)로 적용된다
$('div').html(function(index,text){ return index+"**"+text+"@@"; }); $('div').text(function(index,text){ return index+"**"+text+"@@"; });