.text()
원문 링크 
http://api.jquery.com/text/
함수들
text()
- text()
text( textString )
- .text( textString )
- .text( function(index, text) )
개요 : 조건에 일치하는 요소들(자식 요소까지도 포함한)의 각 요소별 텍스트를 묶어서 반환해 줍니다.
- .text()
.html() 함수는 되지 않지만, .text() 함수는 XML과 HTML에 모두 사용할 수 있습니다. .text() 함수는 조건에 부합하는 요소들의 내부 문자열을 묶어서 반환해 줍니다. (여러 브라우져들의 HTML 파서의 변화로 인해, text는 newlines 과 공백에 따라 조금씩 다르기도 합니다.) 아래 HTML을 보시죠.
<div class="demo-container"> <div class="demo-box">Demonstration Box</div> <ul> <li>list item 1</li> <li>list <strong>item</strong> 2</li> </ul> </div>
$('div.demo-container').text() 스크립트는 아래의 결과를 보여줍니다.
Demonstration Box list item 1 list item 2
.text() 함수로는 폼의 input 또는 script에 적용할 수는 없습니다. input 과 textarea 요소들의 텍스트 값을 세팅하거나 얻으려면 .val()함수를 사용하셔야 합니다. script 요소의 값을 얻으려면 .html()함수를 사용하시면 되구요.
jQuery 1.4에 와서, .text()는 요소값과 더불어 CDATA 노드값도 반환하게 되었습니다.
예 제
첫번째 문단(p)의 text 값을 찾아서 마지막 문단(p)에 굵고 빨간 글씨체로 추가합니다.
<!DOCTYPE html>
<html>
<head>
<style>
p { color:blue; margin:8px; }
b { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p><b>Test</b> Paragraph.</p>
<p></p>
<script>
var str = $("p:first").text();
$("p:last").html(str);
</script>
</body>
</html>미리보기
빨간색의 Test 문자를 얻어서 아래줄에 표시해 줍니다. 보시면 html태그(여기서는 빨간색 굵은 글씨체)는 제거된 것을 보실 수 있습니다. 즉, html은 걷어내 진다는 거네요.
개요 : 조건에 부합되는 요소들 별로 textString을 집어넣을 수 있습니다.
- .text( textString )
- textString 문자열
- .text( function(index, text) )
- function(index, text) 문자열을 반환하는 함수. 인자로는 삽입될 요소들의 위치를 가리키는 인덱스와 기존의 text값을 가질 수 있습니다.
.html() 함수는 안되지만, .text() 함수는 XML 과 HTML 문서에 모두 사용할 수 있습니다.
알고 있어야 하는게 있는데, HTML이 올바르게 렌더링 될 수 있도록 하기 위해서 때에따라 이스케이프 문자열을 사용하기도 해야 합니다. 그렇게 하기 위해서는 DOM 함수인 .createTextNode()을 사용하기도 해야 합니다. 이 함수로 HTML 엔터티를 표현하는 특수문자를 대치하기도 해야 합니다. 즉, <를 표현하기 위해서 < 이런 형태로 사용해야 하기도 하는 거죠. 더 쉽게 예를 들어보겠습니다.
<div class="demo-container">
<div class="demo-box">Demonstration Box</div>
<ul>
<li>list item 1</li>
<li>list <strong>item</strong> 2</li>
</ul>
</div>
위 HTML에 $('div.demo-container').text('<p>This is a test.</p>'); 이렇게 스크립트를 걸면 다음과 같은 DOM의 결과가 나타납니다.
<div class="demo-container"> <p>This is a test.</p> </div>
위의 DOM을 브라우져가 해석하면 화면에 아래와 같이 나타나게 되죠.
<p>This is a test</p>
무슨 말인지 아시겠죠? p 태그로 문단을 나누려고 했다면 위와같이 스크립트를 짜면 전혀 엉뚱한 결과가 나타나게 된다는 거죠. 이 부분은 아래 예제에서도 다시 나옵니다.
.text() 함수는 input 태그들에는 사용할 수 없습니다. input 에서 값을 꺼내려면 .val() 함수를 사용하세요.
jQuery 1.4에 와서, .text() 는 인자로 함수를 사용할 수 있게 되었습니다.
$('ul li').text(function(index) {
return 'item number ' + (index + 1);
});이 결과로 순서가 없는 세개의 <li> 요소들에 아래와 같이 텍스트가 추가됩니다.
<ul> <li>item number 1</li> <li>item number 2</li> <li>item number 3</li> </ul>
예 제
문단(p)에 text를 추가해 봅니다. (주의해서 보실 부분은 볼드 태그가 적용되지 않고 있다는 점입니다.)
<!DOCTYPE html>
<html>
<head>
<style>
p { color:blue; margin:8px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>Test Paragraph.</p>
<script>$("p").text("<b>Some</b> new text.");</script>
</body>
</html>
미리보기
무슨 의미인지 와 닿으시나요? 진짜 진하게 하고 싶으면 어떻게 하면 될까요. 함 해보셔도 좋을듯 합니다.
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery API 정복 - 넓이 구하기, width() (0) | 2011.11.22 |
|---|---|
| jQuery API 정복 - 요소 감싸기, wrap() (0) | 2011.11.22 |
| jQuery API 정복 - 감싼 요소 제거하기, unwrap() (0) | 2011.11.22 |
| jQuery API 정복 - class 토글하기, toggleClass() (0) | 2011.11.22 |
| jQuery API 정복 - 수직 스크롤 이동, scrollTop() (2) | 2011.11.22 |
| jQuery API 정복 - 수평 스크롤 이동, scrollLeft() (0) | 2011.11.22 |
| jQuery API 정복 - 요소 바꾸기, replaceWith() (0) | 2011.11.22 |
| jQuery API 정복 - 요소 바꾸기, replaceAll() (2) | 2011.11.22 |