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> | cs |
그러나 결과는 서로 다르게 나타납니다. 이 둘의 차이점은 무엇일까요?
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> | cs |
이번에는innerHTML속성입니다.html()메서드와 결과가 같은 것을 알 수 있습니다.
<script> $(document).ready(function () { var span = $('span'); console.log(span[0].innerHTML); //<b>단순 텍스트</b> }); </script> | cs |
즉 결론을 정리하자면 다음과 같습니다.
text() 메서드 - DOM 객체의 textContent 속성을 참조하며 단순 텍스트 요소만을 리턴한다.
html() 메서드 - DOM 객체의 innerHTML 속성을 참조하며텍스트를 포함한 태그까지도 리턴한다.
문서 객체의 내용 추가하기
text(), html() 메서드를 이용하여 요소의 내용을 추가할 수 있습니다. 이때 역시 둘의 차이점은 같습니다.
단순한 span이 위와 같이 있고 text() 메서드로 '<b>단순텍스트</b>' 라는 문자열을 내용에 추가하는 경우입니다.
결과는 아래와 같습니다. 즉 태그가 아닌 '<b>단순텍스트</b>' 이라는 문자열 그대로 추가된 것입니다. 이때 태그로 인식되지 않기 위해 내부적으로 HTML Encoding 된 형태인 '<b>단순 텍스트</b>' 가 추가됩니다.
이번에는 같은 조건에서 html() 메서드로 '<b>단순텍스트</b>' 라는 문자열을 추가하는 경우입니다.
결과입니다. text() 메서드를 사용했을때와 결과가 다르다는 것을 알 수 있고 <b> 태그가 적용되어 텍스트가 굵게(bold) 표현되었습니다.
요소 검사를 해보니 span 요소 하위에 b 태그가 적용된 것을 볼 수 있습니다.
즉 결론은 text() 메서드는 단순한 텍스트를 기준으로 동작한다는 점 심지어는 태그까지 문자열 그대로 받아들인다는 점, 그리고 html() 메서드는 문자열에 태그가 있는 경우에 해당 태그를 인식한다는 점 입니다. 이 둘의 차이를 명심하고 목적에 따라 각각의 메서드를 사용하면 좋을 것 같습니다.