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

Front-End/jQuery

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

리딩리드 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>