.text() - 설정자

엘리먼트 집합에 속한 각 엘리먼트의 콘텐츠를 특정 텍스트 콘텐츠로 대체한다.

.text(textString)

.text(function)

.text(textString)
 ◎ testString : 각 엘리먼트의 콘텐츠를 대체할 텍스트

.text(function)
 ◎ function : 각 엘리먼트의 콘텐츠를 대체할 텍스트를 반환하는 메서드


반환값

메서드 연쇄 호출을 지원하는 jQuery 객체


설명

.html() 메서드와 달리 .text() 메서드는 XML과 HTML 문서에 모두 사용할 수 있다.
.text() 메서드는 엘리먼트 집합에 속한 모든 엘리먼트를 대상으로 동작한다.

엘리먼트에 텍스트를 대체하기 전에 해당 텍스트의 특수 문자를 이스케이프 처리해야 한다. 이스케이프하지 않고 태그가 포함된 텍스트를 사용할 때는 툭스문자를 HTML 엔티티로 변환(예를 들어, <를 &lt;로)한다.


소스

<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">
    &lt;p&gt;This is a test.&lt;/p&gt;
</div>

브라우저에서는 다음과 같이 나온다.

<p>This is a test</p>

jQuery 1.4부터는 .text() 메서드에 대체할 텍스트를 반환하는 사용자 정의 함수를 매게변수로 전달할 수 있다.

$('ul li').text(function() {
    return 'item number ' + ($(this).index() + 1);
});

<li> 엘리먼트가 3개인 비순차 목록이 있을 경우 위 코드를 실행하면 다음과 같은 DOM구조가 만들어진다.

<ul>
    <li>item number 1</li>
    <li>item number 2</li>
    <li>item number 3</li>
</ul>