jQuery 공작소 : .text()

jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!

text 메서드는 지정한 요소의 텍스트를 읽어오거나 쓸 수 있습니다.
자바스크립트의 innerText 속성과 같습니다.

예제 1
TEXT 읽어오기 (HTML 태그는 제외됩니다)
보기
jQuery 공작소에 방문해 주셔서 감사드립니다. 데헷
jQuery 공작소에 방문해 주셔서 감사드립니다. 데헷

위 내용의 text (HTML 태그 제외)


소스
<style type="text/css">
    .css_test {
        border-radius : 5px;
        border : 5px solid silver;
        padding : 20px;
        text-align : center;
    }
    .css_test2 {
        text-align : center;
        display : none;
    }
    .css_test2 textarea {
        width : 90%;
        height : 100px;
    }
</style>

<div class="css_test">
    jQuery 공작소에 방문해 주셔서 감사드립니다. <b>데헷</b><br>
    jQuery 공작소에 방문해 주셔서 감사드립니다. <b>데헷</b><br>
    <img src="https://t1.daumcdn.net/cfile/tistory/22366638555ABF491B" />
</div>
<div class="css_test2">
    <br>
    위 내용의 text (HTML 태그 제외)<br>
    <textarea name="html" class=""></textarea><br>
    <br>
</div>
<button type="button" onclick="j_test()">눌러보세용</button>

<script type="text/javascript">
    function j_test(){
        var html = $('.css_test').text();
        $('.css_test2').show();
        $('.css_test2 textarea').val(html);
    }
</script>
관련 CSS
borderborder-radiusdisplayheightpaddingtext-alignwidth
jQuery

- 지정한 대상의 텍스트를 읽어옵니다.

$( '.css_test' ).text()  -  클래스명이 css_test 인것의 텍스트를 읽어옵니다.

예제 2
TEXT 쓰기
보기
아래 버튼을 눌러보세요 ^^
소스
<style type="text/css">
    .css_test {
        border-radius : 5px;
        border : 5px solid silver;
        margin-bottom : 10px;
        padding : 20px;
        text-align : center;
    }
</style>

<div class="css_test">
    아래 버튼을 눌러보세요 ^^
</div>

<button type="button" onclick="j_test('https://t1.daumcdn.net/cfile/tistory/2507343954D74FB70C')">사진1</button>
<button type="button" onclick="j_test('https://t1.daumcdn.net/cfile/tistory/2366EB4B550B9B3715')">사진2</button>
<button type="button" onclick="j_test('https://t1.daumcdn.net/cfile/tistory/210A014854D735142C')">사진3</button>
<button type="button" onclick="j_test('https://t1.daumcdn.net/cfile/tistory/24242C3D552F50A61B')">사진4</button>
<button type="button" onclick="j_test('https://t1.daumcdn.net/cfile/tistory/2701603954D74FB617')">사진5</button>

<script type="text/javascript">
    function j_test(src){
        $('.css_test').text('<img src="' + src + '">');
    }
</script>
관련 CSS
borderborder-radiusmargin-bottompaddingtext-align
jQuery

- 지정한 대상에 텍스트를 씁니다.
- 태그가 포함되어 있더라도 적용되지 않고 그대로 써집니다.

$( '.css_test' ).text( 텍스트내용 )  -  클래스명이 css_test 인것에 텍스트를 씁니다

+ 관련 jQuery +
jQuery 홈페이지 .text() API 문서 : http://api.jquery.com/text/
☞ 목록으로 가기
jQuery 공작소  /   CSS 공작소