728x90

 

jQuery innerHTML innerText기능 사용하기 .html() .text()

text(), html() 메서드는 문서 객체 안의 내용을 가져오거나 추가할 때 사용하는 메서드입니다.

 

text() 이벤트

 $(셀렉터).text() 셀렉터의 문자를 변경 해주는 것입니다.

html() 이벤트

문자열만이 아닌 문자열 안에 태그도 같이 넣을수 있습니다.

 

문서 객체의 내용얻어오기

<body>
	<span><b>단순텍스트</b></span>
</body>

문서 body의 내용이 위와 같이 구성되어 있습니다. 만약 이상태에서 span의 내용을 얻고자 할때 

text(), html() 메서드를 사용할 수 있습니다.

<script>                                                                                     
    $(document).ready(function () { 
        var text = $('span').text(); 
        var html = $('span').html(); 
        console.log(text); //결과 : 단순 텍스트
        console.log(html); //결과 : <b>단순 텍스트</b>
    });
</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 속성을 참조하며 텍스트를 포함한 태그까지도 리턴한다.

 

 

정리 출처 : https://dololak.tistory.com/401

728x90

'STUDY > jQuery' 카테고리의 다른 글

[jQuery] 객체합치기 .extend()  (0) 2022.12.28
[jQuery] 이벤트등록 .bind() .unbind() / .on() .off()  (0) 2022.12.28
[EasyUI] DataGrid / Layout / Link Button / Massager  (0) 2022.12.21
[jQuery] 제이쿼리 기초 animate()·stop()  (0) 2022.10.05
[jQuery] 자주 사용되는 메서드 ready·on·prop·attr  (0) 2022.10.05

티스토리툴바