[jQuery기초] 요소조작_이벤트_html_text_empty_remove

jQuery는 DOM 객체를 탐색, 접근하여 조작하는 여러가지 방법을 제공한다. 
실무에서 많이 사용하는 메서드 위주로 요약해서 작성하였으며 정확한 정보들을 확인하고 싶다면 jQuery 공식 사이트를 참조하면 된다.

html 

HTML 문서에서 모든 요소를 가져오거나 추가할 수 있다. 
주석을 포함한 선택자의 모든 요소를 가져온다. 
XML에서는 사용할 수 없다.

// HTML 
<div id="wrap"> 
  <!-- 주석 --> 
  <div class="children">1번</div> 
  <div class="children">2번</div> 
  <div class="children">3번</div> 
</div> 

// jQuery 
// #wrap 안에 있는 모든 요소를 가져온다 
$('#wrap').html(); 

// #wrap 안에 있는 모든 요소를 빈 값으로 만든다.
$('#wrap').html(''); 

 

text 

HTML, XML에서 모두 사용할 수 있으며 모든 문자열을 가져오거나 추가할 수 있다. 
브라우저마다 HTML 파서의 차이가 있을 수 있으므로 줄바꿈 및 공백이 다를 수 있다.

// HTML 
<div id="wrap"> 
  <!-- 주석 --> 
  <div class="children">1번</div> 
  <div class="children">2번</div> 
  <div class="children">3번</div> 
</div> 

// jQuery 
// #wrap 안에 있는 텍스트 '1번 2번 3번'을 문자열로 반환 
$('#wrap').text(); 

// #wrap 안에 있는 모든 요소를 지우고 문자열 '새로운' 출력
$('#wrap').text('새로운');

 

empty

선택된 요소의 하위에 있는 모든 요소를 제거한다.

// HTML 
<div id="wrap"> 
  <div class="children">1번</div> 
  <div class="children">2번</div> 
  <div class="children">3번</div> 
</div> 

// jQuery 
// #wrap 안에 있는 모든 요소를 제거
$('#wrap').empty(); 

 

remove

선택된 요소를 포함한 하위에 있는 모든 요소를 제거한다.

// HTML 
<div id="wrap"> 
  <div class="children">1번</div> 
  <div class="children">2번</div> 
  <div class="children">3번</div> 
</div>

// jQuery 
// #wra과 함께 모든 요소 제거
$('#wrap').remove();