[jQuery] html() vs text() 의 차이

Front-End/jQuery 2017. 1. 3. 17:09

html() vs text() 의 차이

- 요소의 인식과 접근하는 대상이 다르다

1. 차이점

1) 인식

- html() : HTML로 인식한다

- text() : 문자 열로 인식한다

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style> </style> </head> <div id="container"> </div> <div id="container2"></div> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(function(){ $('#container').text('text:<br/><img src="nba.png"/>'); $('#container2').html('html:<br/><img src="nba.png"/>'); }); </script>

2) 접근 대상

- html() : 최초의 요소 전체만을 반환

- text() : $()함수로 읽은 아래 요소 모두 반환

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style> </style> </head> <p id="container"> text:<br/><img src="nba.png"> </p><p id="container2"> html:<br/><img src="nba.png"> </p> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(function(){ console.log($('#container').text()); console.log($('#container2').html()); }); </script>

'Front-End > jQuery' 카테고리의 다른 글

[jQuery] 요소 삽입/이동 - insertBefore(), insertAfter(), prependTo(), appendTo() (1)	2017.01.04
[jQuery] 특정 요소 범위에 한정하여 다른요소 검색 - find() (0)	2017.01.03
[jQuery] 제이쿼리를 이용하여 요소의 속성 읽기/설정 - attr(), prop() (0)	2017.01.03
[jQuery] 제이쿼리를 이용하여 특정 위치로 스크롤 이동 - scrollTop(), scrollLeft() (0)	2017.01.03
[jQuery] 제이쿼리를 이용한 요소의 높이와 폭 조절 - width(), height() (0)	2017.01.03

리딩리드

일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30