본문으로 바로가기

jQuery 노드 다루기 - 3편

category IT/프로그래밍 2016. 7. 5. 15:25
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

 

오늘 공부할 내용은 이미 만들어져 있는 노드를 특정 위치로 이동시키는 기능을 배워보겠습니다

노드 이동은 노드 추가와 동일한 append(), appendTo(), prepend(), prependTo(), insertBefore(), before(), insertAfter(), after()메서드를 이용합니다. 방법은 거의 동일합니다. 차이점이라면 메서드에 넘겨주는 매개 변수값이 신규 노드라면 추가가 되고 이미 존재하는 기존 노드라면 이동이 됩니다.

 

이번 노드 이동의 핵심 4가지 입니다.

  1. 첫 번째 노드로 이동

  2. 마지막 번째 노드로 이동

  3. 특정 노드의 이전 노드로 이동

  4. 특정 노드의 다음 노드로 이동

 

이번 노드 이동은 노드 생성 / 추가 에서 사용한 예제 그대로 사용하겠습니다.

 

첫 번째 자식 노드로 이동

기존 노드를 특정 노드의 첫 번째 자식 노드로 이동하고 싶은 경우 신규 노드 추가에서 사용한 prepend() , prependTo()메서드를 사용하면 됩니다.

사용법 :  

 $부모 노드.prepend($기존 노드) 

 

 $기존 노드.prependTo($부모 노드)

   

 

예제 - 클릭한 메뉴 아이템을 최상위 메뉴 아이템으로 이동해 주세요.

 

 

왼쪽 그림을 보면 <li></li> 순서가 바뀐 것을 확인할 수 있습니다. prepend를 사용하면 내가 클릭한 li태그가 맨 위로 올라가는 것을 확인할 수 있습니다.

prependTo()메서드는 prepend()메서드와 비슷하기 때문에 지나가겠습니다.

 

마지막 번째 자식 노드로 이동

기존 노드를 특정 노드의 마지막 자식 노드로 이동 시킬 수 있습니다. 노드 추가에 사용한 append()와 appendTo()메서드를 사용하면 됩니다.

사용법 :  

 $부모 노드.append($이동 노드) 

 

 $이동 노드.appendTo($부모 노드) 

예제 - 클릭한 메뉴 아이템을 최하위 메뉴 아이템으로 이동해 주세요.

다음 사진을 통해 append()메서드를 사용해서 클릭한 menu3노드가 맨 마지막으로 이동 된 것을 볼 수 있습니다.

 

특정 노드의 이전 노드로 이동

insertBefore()메서드와 before()를 이용하면 특정 노드의 이전 노드로 이동 시킬 수 있습니다.

 사용법 :

 $이동노드.insertBefore($기준노드) 

 

 $기준노드.before($이동노드)

예제 - 클릭한 메뉴 아이템을 세 번째 메뉴(menu3)의 이전 노드로 이동 시켜 주세요.

다음 사진을 통해 before()메서드를 사용해 클릭한 menu6노드가 메뉴3위로 올라온 것을 확인 할 수 있습니다.

 

특정 노드의 다음 노드로 이동

insertAfter(), after()메서드를 통해 원하는 노드를 특정 노드의 다음 노드로 이동 시킬 수 있습니다.

 

 사용법 :

 $이동노드.insertAfter($기준노드) 

 

 $기준노드.after($이동노드)

 

예제 - 클릭한 메뉴 아이템을 세 번째 메뉴(menu3)의 다음 노드로 이동 시켜 주세요.

 

다음 사진을 통해 menu2를 클릭했을 시 after()메서드에 의해 menu3밑으로 온것을 확인 할 수 있습니다.

 

노드 이동 정리

 

노드 이동 

 첫 번째 자식 노드로 이동

 $부모노드.prepend($이동노드)

 $이동노드.prependTo($부모노드) 

 마지막 번째 자식 노드로 이동

 $부모노드.append($이동노드)

 $이동노드.appendTo($부모노드) 

 특정 노드의 이전 노드로 이동

 $이동노드.insertBefore($기준노드)

 $기준노드.before($이동노드)

 특정 노드의 다음 노드로 이동

 $이동노드.insertAfter($기준노드)

 $기준노드.after($이동노드)

 

'IT > 프로그래밍' 카테고리의 다른 글

아톰(Atom) 에디터 사용법(Window 기준)  (0) 2016.07.07
jQuery 노드 다루기 - 4편  (0) 2016.07.06
jQuery 노드다루기 - 2편  (0) 2016.07.04
VMware(가상머신) 사용법  (0) 2016.06.29
jQuery 노드 다루기  (0) 2016.06.29