엘리먼트 콘텐츠 설정하기

. html()

  일치하는 집합에서 첫 번째 엘리먼트의 HTML 콘텐츠를 가져온다.

  엘리먼트의 innerHTML 프로퍼티 값과 동일

 

. html(text)

  전달된 HTML 코드를 모든 일치하는 엘리먼트의 콘텐츠로 설정

 

. text()

  확장 엘리먼트의 모든 텍스트 콘텐츠를 결합하여 return

 

. text(content)

  모든 확장 엘리먼트의 텍스트 콘텐츠를 전달된 값으로 설정

  content에 '<' 또는 '>'를 포함한다면, HTML 엔티티로 대체된다.

  ※ '<'는 '&lt;'로 '>'는 '&gt;'로 대체

  ※ http://www.w3schools.com/HTML/html_entities.asp

 

 

. append(content=String|Element|Object)

  일치하는 모든 엘리먼트의 콘텐츠에 전달된 HTML코드나 엘리먼트를 덧붙인다.

  $('p').append('<b>TEXT<b>');

  $('p.appendToMe').append( $("a.appendMe") );

 

  var toAppend = $("a.appendMe")[0];

  $("p.appendToMe").append(toAppend);

  ~~~~~~~~~~~~~

  엘리먼트가 하나만 선택되면 이동하고, 여러개가 선택되면 복사된다.

  엘리먼트 하나만 다른 위치로 이동시키거나 복사하려면, appendTo()를 사용하는 편이 간단

 

 

. appendTo(target=String|Element)

  확장 집합의 모든 엘리먼트를 target의 끝으로 이동시킨다.

  셀렉터가 2개 이상 엘리먼트에 일치하면, 복사/추가된다.

 

※ a.append(b)    는 a 엘리멘트에 b 엘리먼트를 덧붙이고

    a.appendTo(b)는 a 엘리먼트를 b 엘리먼트에 덧붙인다.

 

 

. prepend(), prependTo()

  원본 엘리먼트를 대상 엘리먼트 앞에 삽입

 

. before(), insertBefore()

  엘리먼트를 대상의 첫 번째 자식으로 삽입하는 대신

  대상의 바로 앞 형제로 삽입

 

. after(), insertAfter()

  엘리먼트를 대상의 마지막 자식으로 삽입하는 대신에

  대상의 바로 뒤 형제로 삽입

  $('<p>hi</p>').insertAfter('p img');

 

 

. wrap(wrapper=String|Element)

  일치하는 집합의 엘리먼트를 전달된 HTML태그나 엘리먼트의 복사본으로 감싼다.

  여러 엘리먼트가 있다면, 각 엘리먼트에 개별적으로 동작한다.

  $("a.surprise").wrap("<div class='hello'></div>");

  $("a.surprise").wrap( $("div:first")[0] );

 

. wrapAll(wrapper=String|Element)

  일치하는 집합 내에 있는 모든 엘리먼트를 전달된 HTML태그나 엘리먼트의 복사본으로 감싼다.

  일치하는 집합을 하나의 단위로 취급

 

. wrapInner(wrapper=String|Element)

  일치하는 집합에서 엘리먼트의 텍스트 노드를 포함한 콘텐츠를 전달된 HTML태그나 엘리먼트의 복사본으로 감싼다.

 

 

. remove()

  페이지 DOM에서 확장 집합의 모든 엘리먼트를 삭제

  삭제된 확장 집합을 return한다.  ← 여전히 참조할 수 있다.

 

  ※ remove()와 after()를 사용하여 Replace를 수행한다.

      $("div.elementToReplace").after("<p>div를 대체한다.</p>").remove(); 또는

      $.fn(replaceWith = function(html) {

         return this.after(html).remove();

      };

      $("div.elementToReplace").replaceWith("<p>div를 대체한다.</p>");

 

. empty()

  일치하는 집합의 모든 DOM 엘리먼트의 콘텐츠를 제거

 

 

. clone(copyHandlers=true/false=이벤트 핸들러의 복사여부)

  확장 집합에 있는 엘리먼트를 복사하여, 새로운 확장 집합을 반환

  엘리먼트와 자식 모두 복사된다.

  $('img').clone().appendTo('filedset.photo');

  $('ul').clone().insertBefore('#here');

  $('ul').clone().insertBefore('#here').end().hide();