4. jQuery 조작_Manipulation

4. jQuery 조작_Manipulation

 ■ jQuery API Manipulation(조작)
 ο 개요
    DOM의 제어, 갱신 조작

 

 ο 내부 삽입
    1) append(content)
       - 의미
         모든 요소 내부에 컨텐츠를 추가한다.

• 사용예
        // p 태그에 내용 추가 -> 결과 : 『중요과목 : 프레임워크』
        $("p").append("<b>프레임워크</b>");
               :
        <p>중요과목: </p>

   

    2) appendTo(content)
      - 의미
        요소의 내용을 다른 요소에 추가한다.

•      사용예
        // body 마지막 부분에 제이쿼리 추가
        $("<div><p>제이쿼리</p></div>").appendTo("body");

        // id가 a인 태그의 뒷 부분에 span 태그의 내용을 추가 ->  결과 : 『중요과목 : 프레임워크』
        $("span").appendTo("#a");
                :
        <span>프레임워크</span>
        <div id="a">중요과목 :  </div>

   

   3) prepend(content)
      - 의미
        모든 요소 내부의 선두에 컨텐츠를 삽입한다.

 

   4) prependTo(content)
      - 의미
        요소의 내용을 다른 요소에 추가합니다.

 ο 외부 삽입
   1) after(content)
      - 의미
        각 요소의 뒤로 컨텐츠를 삽입한다.

 

   2) before(content)
      - 의미
        각 요소의 전에 컨텐츠를 삽입한다.

 

   3) insertAfter(content)
      - 의미
        요소를 지정한 다른 요소의 뒤에 삽입한다.

 

   4) insertBefore(content)
      - 의미
        요소를 지정한 다른 요소의 전에 삽입한다.

 ο 주위에의 삽입
   1) wrap(html)
      - 의미
        각 요소를 구조적으로 지정 HTML로 둘러싼다.

• 사용예
       // p요소를 지정 div로 둘러싼다.
         $("p").wrap("<div class='wrap'><b></b></div>");
                      :
        <p>Test Paragraph.</p>

   

   2) wrap(elem)
      - 의미
        지정 요소를 실행 요소로 둘러싼다.

• 사용예
       // p요소를 "content" id의 요소로 둘러싼다.
           $("p").wrap($('#content'));
                   :
           <p>Test Paragraph.</p><div id="content"></div>

   

   3) wrapAll(html)
      - 의미
        요소 집합을 정리하고, 지정HTML 안에 1개로 정리해 사이에 둔다.

 

   4) wrapAll(elem)
      - 의미
        wrapAll(html)(와)과 같지만,HTML문자열은 아니고 DOM Element등을 지정한다.

 

   5) wrapInner(html)
      - 의미
        요소가 가지는 각 자 요소(텍스트 포함)를 HTML 지정 요소로 둘러싼다.

 

   6) wrapInner(elem)
      - 의미
        요소가 가지는 각 자 요소(텍스트 포함)를 지정 요소로 둘러싼다.

 

   7) unwrap()
      - 의미
        특정한 부모요소를 제거한다.

• 
  사용예
        // <p>태그를 감싸고 있는 <div> 요소를 제거

 

    $('p').unwrap();
         :
          <div>
           <p>Foo</p>
          </div>

 ο 치환
   1) replaceWith(content)
      - 의미
        각 요소를 지정 HTML 혹은 DOM Element 로 옮겨놓는다.

   2) replaceAll(selector)
      - 의미
        지정 조건에 합치하는 요소를 모두 옮겨놓는다.

 ο 삭제
   1) empty()
      - 의미
        요소 집합으로부터 모든 아이 요소를 삭제한다.

 

   2) remove([expr])
      - 의미
        DOM(으)로부터 지정 조건에 합치하는 요소를 모두 삭제한다.

 

   3) detach( [ selector ] )
      - 의미
        데이터를 유지한 상태로 요소 제거. detach 메소드는 remove 메소드와 달리 해당 요소가 가진 데이터 요소를 파괴하지 않는다. 이 데이터는 jQuery의 이벤트 시스템에 보존되어있기 때문에 ".data()" 메소드 등을 그대로 사용하여 다시 호출할 수 있다.
        재사용될 만한 요소에만 사용하는 것이 중요하다. DOM에서 요소를 제거하거나 추가하는 일이 빈번하게 발생할 때 매우 유용하게 사용할 수 있다.

 ο 카피
   1) clone()
      - 의미
        DOM 요소를 카피해 새롭게 작성.
   2) clone(true)
      - 의미
        DOM 요소를, 그 요소가 가지는 이벤트도 포함해 카피한다.

 ο 기타
  1) detach()
      - 의미
       동적인 조작을 돕기 위해서 detach() 라는 새로운 메서드가 추가되었다. 이는 DOM에서 특정 요소를 제거하는 역할을 한다는 부분에서는 remove()와 기능적으로 동일하지만, 해당 요소의 데이터(이벤트 등)를 제거하지 않는다는 주요한 차이가 있다. 그렇기에, 이는 일시적으로 요소를 DOM에서 제거했다가 다시금 DOM에 추가해야 하는 경우 매우 유용하다.