html() 메소드

이 글은 jquery-1.2.2.js 기반으로 작성되었다.

이번엔 html 메소드를 알아보자.

먼저 api document에는 다음과 같이 정의되어 있다.

.html() jQuery객체의 첫번째 DOM 요소의 HTML 텍스트 컨텐트를 받는다. .html(htmlString) 각각의 DOM 요소의 컨텐트를 htmlString으로 set한다.

여기서 주의할 점은 Get을 할 경우에는 jQuery객체의 첫번째 요소의 HTML 컨텐트를 가져오는 반면 Set을 하는 경우는 각각의 모든 요소에 Set이 적용된다는 것이다.

코드를 보자. 앞의 text() 메소드 를 이해했으면 매우 간단히 이해할 것이다.

html: function( value ) {
  // 인자가 안들어오면 this.length를 확인한다.
  // length가 0 보다 크면, this[0] (첫번째 요소)의 innerHTML을 리턴한다.
  return value == undefined ?
                 (this.length ?  this[0].innerHTML : null) :
                
  // value가 들어오는 경우 해당 요소 아래 자식들을 모두 지우고, apppend한다.
  this.empty().append( value );
},