[jQuery] 특정 DOM요소 앞뒤로 삽입하기 (ft. after()/before()& insertAfter()/insertBefore() )

- 특정 DOM요소 앞 뒤에 값 삽입하기 -

---

우선 제목에 나와있는 after(), insertAfter(), before(), 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를 추가

 

이제 예제를 통해 접해보자.

---

▷예제1)

$(".btnCtrl").click(function(){
  var ctrl = $(this).attr("ctrl-btn");
  switch (ctrl) {
    case 'up':
      $("ul li.active").insertBefore($(ul li.active")[0].previousElementSibling);
      break;
    case 'down':
      $("ul li.active").insertAfter($("ul li.active")[0].nextElementSibling);
      break;
  }
});

그냥 단순하게 <ul> 태그 안에 <li>의 순서를 서로 바꿀수 있도록 테스트를 해본것이며

선택한 객체(.active)를 기준으로 앞/뒤에 위치해 있는 객체의 앞뒤로 이동하게 만든것이다.

일단 테스트한 결과 정상적으로 순서가 바뀌는것을 볼수있었다.

---

출처 : https://webclub.tistory.com/29

after() vs insertAfter() 그리고 before() vs insertBefore()