[jQuery] jQuery text(), html() 메서드 설명 및 차이점

jQuery text(), html() 메서드

text(), html() 메서드는 문서 객체 안의 내용을 가져오거나 추가할때 사용하는 메서드입니다. 얼핏 보기에는 두 메서드의 동작과 결과가 똑같은듯 보이지만 조금의 차이가 있습니다. 이 둘의 사용법 및 차이를 살펴보겠습니다.

문서 객체의 내용 얻어오기

문서 body의 내용이 위와 같이 구성되어 있습니다. 만약 이상태에서 span의 내용을 얻고자 할때 text(), html() 메서드를 사용할 수 있습니다.

<script>                                                                                     
    $(document).ready(function () { 
        var text = $('span').text(); 
        var html = $('span').html(); 
        console.log(text);
        console.log(html);
    });
</script> 

그러나 결과는 서로 다르게 나타납니다. 이 둘의 차이점은 무엇일까요?

text(), html() 동작의 차이점

먼저 text() 메서드를 먼저 살펴보자면 text() 메서드는 jQuery로 선택한 DOM 객체의 textContent 속성을 참조합니다. jQeury 객체의 내부에는 실제 자바스크립트 DOM 객체가 들어있고 [0] 과 같이 index로 꺼내올 수 있습니다. 다음의 소스를 봐주세요.

span[0] 은 jQuery 객체에서 꺼낸 실제 자바스크립트 DOM 객체입니다. textContent 속성을 출력하면 text()메서드와 같은 결과가 출력됩니다.

<script>                                                                                     
    $(document).ready(function () { 
        var span = $('span'); 
        console.log(span[0].textContent); //'단순 텍스트' 출력
    });
</script> 

이번에는 innerHTML 속성입니다. html() 메서드와 결과가 같은 것을 알 수 있습니다.

<script>                                                                                     
    $(document).ready(function () { 
        var span = $('span'); 
        console.log(span[0].innerHTML); //<b>단순 텍스트</b>
    });
</script> 

즉 결론을 정리하자면 다음과 같습니다.

• text() 메서드 - DOM 객체의 textContent 속성을 참조하며 단순 텍스트 요소만을 리턴한다.
• html() 메서드 - DOM 객체의 innerHTML 속성을 참조하며 텍스트를 포함한 태그까지도 리턴한다.

문서 객체의 내용 추가하기

text(), html() 메서드를 이용하여 요소의 내용을 추가할 수 있습니다. 이때 역시 둘의 차이점은 같습니다.

단순한 span이 위와 같이 있고 text() 메서드로 '<b>단순텍스트</b>' 라는 문자열을 내용에 추가하는 경우입니다.

<script>                                                                                     
    $(document).ready(function () { 
        var span = $('span').text('<b>단순 텍스트</b>'); 
    });
</script> 

결과는 아래와 같습니다. 즉 태그가 아닌 '<b>단순텍스트</b>' 이라는 문자열 그대로 추가된 것입니다. 이때 태그로 인식되지 않기 위해 내부적으로 HTML Encoding 된 형태인 '&lt;b&gt;단순 텍스트&lt;/b&gt;' 가 추가됩니다.

이번에는 같은 조건에서 html() 메서드로 '<b>단순텍스트</b>' 라는 문자열을 추가하는 경우입니다.

<script>                                                                                     
    $(document).ready(function () { 
        var span = $('span').html('<b>단순 텍스트</b>'); 
    });
</script> 

결과입니다. text() 메서드를 사용했을때와 결과가 다르다는 것을 알 수 있고 <b> 태그가 적용되어 텍스트가 굵게(bold) 표현되었습니다.

요소 검사를 해보니 span 요소 하위에 b 태그가 적용된 것을 볼 수 있습니다.

즉 결론은 text() 메서드는 단순한 텍스트를 기준으로 동작한다는 점 심지어는 태그까지 문자열 그대로 받아들인다는 점, 그리고 html() 메서드는 문자열에 태그가 있는 경우에 해당 태그를 인식한다는 점 입니다. 이 둘의 차이를 명심하고 목적에 따라 각각의 메서드를 사용하면 좋을 것 같습니다.