jquery DOM 요소 이동

웹 프로그래밍을 진행하다 보면 DOM의 요소를 이동해야 하는 경우가 생긴다.

    
Element 1
    
Element 2
    
Element 3
    
Element 3
    
Element 4

 예를 들어 위와 같이 작성된 요소중 id가element3인 요소의 위치를 위아래로 이동하고 싶은 경우 단순히 pure JavaScript를 이용하는 경우 복잡한 코드 작성으로 인한 가독성 저하 및 유지보수에도 문제가 생기된다. 이럴 경우 jQuery와 같은 라이브러리를 이용 구현을 간단하게 할수 있다.

 아래의 스크립트를 참조해 응용한다면 다양한 경우에 적용할 수 있을 것으로 생각된다.

function moveup() {
    $('#element3').after($('#element3').prev());
}
function movedown() {
    $('#element3').before($('#element3').next());
}

 

 각각의 펑션은 지정된 id의 요소를 위와 아래로 이동시키도록 되어있다.

위의 jQuery의 펑션을 간단히 소개해 보도록 하겠습니다.

.before( content [, content] )

선택된 요소의 직전에 요소를 삽입한다.(sibling 노드) 인자로 넘겨준 content가 이미 DOM상에 존재하는 요소의 경우 이동하는 효과를 가져온다. 배열 요소의 before호출의 경우 첫번재는 이동, 두번째 이후부터는 복제된 요소가 삽입된다.

.after( content [, content] )

선택된 요소의 직후에 요소를 삽입한다.(sibling 노드) 인자로 넘겨준 content가 이미 DOM상에 존재하는 요소의 경우 이동하는 효과를 가져온다. 배열 요소의 before호출의 경우 첫번재는 이동, 두번째 이후부터는 복제된 요소가 삽입된다.

.prev( [selector ] )

직전 요소를 가져온다. 셀렉터 파라메터에의해 필터링도 가능하다.(sibling 노드)

.next( [selector ] )

직후 요소를 가져온다. 셀렉터 파라메터에의한 필터링도 가능하다.(sibling 노드)

 

※API참조 : http://api.jquery.com