[div 이동] insertBefore

after()        : 지정한 요소 뒤에 새로운 요소를 삽입 - A.after(B)        – A 뒤에 B를 추가

insertAfter() : 지정한 요소 뒤에 새로운 요소를 삽입 - A.insertAfter(B) – B 뒤에 A를 추가

 

before()        : 지정한 요소의 시작 부분에 내용을 삽입 - A.before(B) – A 앞에 B를 추가

insertBefore()  : 지정한 요소의 시작 부분에 내용을 삽입- A.insertBefore(B) – B 앞에 A를 추가

---

[SAMPLE]

<script type="text/javascript">
  //노선 div 이동(up)
  function route_up(obj) {
   var idx    = $("img[name=upBtn]").index(obj);
   var idx2   = idx - 1;
   var totCnt = $("img[name=upBtn]").length - 1;

   if(idx > 0) {
    if($("div[name=route_list]").eq(idx2).length > 0) {
     $("div[name=route_list]").eq(idx).insertBefore($("div[name=route_list]").eq(idx2));
    }
   }

   //버튼 이미지 재설정
   route_img_set(totCnt);
  }

  //노선 div 이동(down)
  function route_down(obj) {
      var idx    = $("img[name=downBtn]").index(obj);
   var idx2   = idx + 1;
   var totCnt = $("img[name=downBtn]").length - 1;

   if(idx < totCnt) {
    if($("div[name=route_list]").eq(idx2).length > 0) {
     $("div[name=route_list]").eq(idx).insertAfter($("div[name=route_list]").eq(idx2));
    }
   }

   //버튼 이미지 재설정
   route_img_set(totCnt);
  }

  function route_img_set(totCnt) {
   $("img[name=upBtn]").each(function(index){
    if(index == 0) {
     $("img[name=upBtn]").eq(index).attr("src", "image/btn_top02.gif");
     $("img[name=downBtn]").eq(index).attr("src", "image/btn_lower.gif");
    } else if(index == totCnt) {
     $("img[name=upBtn]").eq(index).attr("src", "image/btn_top.gif");
     $("img[name=downBtn]").eq(index).attr("src", "image/btn_lower02.gif");
    } else {
     $("img[name=upBtn]").eq(index).attr("src", "image/btn_top.gif");
           $("img[name=downBtn]").eq(index).attr("src", "image/btn_lower.gif");
    }
   });
  }
 </script>