jQuery4 --DOM 조작하기

A> append('내용'[,내용])

     --선택한 엘리먼트의 마지막에 자식 엘리먼트로 추가

 

     $(내용).appendTo('대상(선택자 혹은 태그)') 

     --선택한 엘리먼트를 선택한 위치에 자식 엘리먼트로 추가

 

B>  prepend(새로운 엘리먼트)

     --인자로 전달된 새로운 엘리먼트를 가장 처음의 자식 엘리먼트로 추가

     

    $(내용).prependTo(' 대상(선택자 혹은 태그) ')

    --인자로 전달된 새로운 엘리먼트를 가장 처음의 자식 엘리먼트로 추가

 

 

C> $(내용).insertafter( 대상 )

     --대상 뒷 부분에 요소를 삽입 한다.

 

     $(대상).after($(내용))

     -- 대상 뒷 부분에 요소를 삽입 한다.

 

 

D> $(내용).insertbefore( 대상 )

      -- 특정 대상 앞부분에 요소 삽입

     $(대상).before($(내용))

     -- 특정 대상 앞부분에 요소 삽입

 

 

E> $(대상).wrapAll(내용)

     --대상을 내용으로 감싼다.

 

    $(대상).wrap(내용)

     -- 대상 각각을 내용으로 감싼다.

 

F> $(대상).replaceWith(내용)

    --대상의 집합에 속한 각 엘리먼트를 지정한 내용으로 변경한다.

    

    $(대상).replaceAll(내용)

    -- 대상에 대한 모든 엘리먼트를 지정한 내용으로 변경한다.

 

 

G> empty()

     --엘리먼트의 집합에서 대상 과 자식 엘리먼트와 텍스트까지 제거

 

    remove() 

    -- 선택한 엘리먼트를 제거

 

   remove(' 대상1, 대상2 ')

   -- 여러개를 대상을 선택하여  제거할 수도 있다.

    

 

H> clone()

     -- 선택한 엘리먼트를 복제

 

 

I> 좌표와 넓이 관련

 

   offset() : document 내의 엘리먼트 위치 

   width(): 해당 엘리먼트의 넓이 

   width('변경할 값') : 해당 엘리먼트의 넓이를 변경할 값으로 바꾼다.

   heigth() : 해당 엘리먼트의 높이

  heigth('변경할 값') : 해당 엘리먼트의 높이를 변경할 값으로 바꾼다.

  outerWidth() : 엘리먼트의 border 와  padding 값을 포함한 넓이를 알아낸다.

  outerHeight() : 엘리먼의 border 와 padding 값을 포함한 높이를 알아낸다.