728x90
html() 메서드는 선택한 요소의 하위요소를 가져와 문자열로 반환하거나 하위 요소를 전부 제거하고 새 요소로 바꿀때 사용한다.
text() 메서드는 선택한 요소에 포함되어 있는 전체 텍스트를 가져오거나 선택한 하위 요소를 전부 제거하고 새 텍스트를 생성할 때 사용한다.
* 기본형
| 1) $("요소 선택").html(); 2) $("요소 선택").html("새 요소"); 3) $("요소 선택").text(); 4) $("요소 선택").text("새 텍스트"); |
1) 선택한 요소의 하위 요소를 가져와 문자열로 반환한다.
2) 선택한 요소의 하위 요소를 전부 제거하고 지정한 새 요소를 생성한다.
3) 선택한 요소의 텍스트만 가져온다.
4) 선택한 요소의 하위 요소를 전부 제거하고 지정한 텍스트를 생성한다.
* 예제
| <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title> 객체 조작 및 생성 </title> <script src="js/jquery.js"></script> <script> $(function(){ var result_1 = $("#sec_1").html( ); //id값이 "sec_1"인 하위요소를 문자열로 가져와 result_1에 저장한다. console.log(result_1); $("#sec_1 p").html("<a href=\"#\">Text1</a>"); // id 값이 "sec_1"인 요소의 하위요소 중 <p> 요소의 하위 요소를 새 요소로 바꾼다. var result_2 = $("#sec_2").text( ); // id값이 "sec_2"인 요소의 텍스트를 result_2에 저장한다. console.log(result_2); $("#sec_2 h2").text("text()"); //di값이 "sec_2"인 요소의 하위 요소 중 <h2>요소의 하위요소를 모두 제거하고 새 텍스트를 생성한다. }); </script> </head> <body> <h1><strong>객체 조작 및 생성</strong></h1> <section id="sec_1"> <h2><em>html()</em></h2> <p>내용1</p> </section> <section id="sec_2"> <h2><em>텍스트()</em></h2> <p>내용2</p> </section> </body> </html> |
'내마음대로만들어보자 > JS' 카테고리의 다른 글
| addClass() / removeClass() / toggleClass() / hasClass() 메서드 (0) | 2021.08.21 |
|---|---|
| attr() / removeAttr() 메서드 (0) | 2021.08.21 |
| 속성 탐색 선택자 (0) | 2021.08.19 |
| index() 메서드 (0) | 2021.08.19 |
| $.inArray() / $.isArray() / $.merge() 메서드 (0) | 2021.08.19 |