jQuery after(), insertAfter(), before(), insertBefore()

after() - 지정한 요소 뒤에 새로운 요소를 삽입
insertAfter() - 지정한 요소 뒤에 새로운 요소를 삽입

after()와 insertAfter()는 동일한 기능을 수행하지만, 삽입될 내용과 타겟의 위치가 다릅니다.

A.after(B) – A 뒤에 B를 추가
A.insertAfter(B) – B 뒤에 A를 추가

$('#afterBtn').click(function(){
  $('#target').after($('#source'));
});

$('#insertAfterBtn').click(function(){
  $('#source').insertAfter($('#target')); // after와 타겟, 소스 위치가 다름
});

before() – 지정한 요소의 시작 부분에 내용을 삽입
insertBefore() – 지정한 요소의 시작 부분에 내용을 삽입

 

before()와 insertBefore()는 동일한 기능을 수행하지만, 삽입될 내용와 타겟의 위치가 다릅니다.
A.before(B) – A 앞에 B를 추가
A.insertBefore(B) – B 앞에 A를 추가

$('#beforeBtn').click(function(){
  $('#target').before($('#source'));                         
});

$('#insertBeforeBtn').click(function(){
  $('#source').insertBefore($('#target')); // before와 타겟, 소스 위치가 다름
});