태그 내부에서 뒷 부분에 추가하기
$(A).appendTo(B);
$(B).append(A);B의 내부요소 뒤에 A를 추가한다.
A = <a>A내부요소입니다.</a>
B = <b>B입니다.</b>
일 때, 위 코드 실행결과
<a>
A내부요소입니다.
<b>
B입니다.
</b>
</a>
태그 내부에서 앞 부분에 추가하기
$(A).prependTo(B);
$(B).prepend(A);B의 내부요소 앞에 A를 추가한다.
A = <a>A내부요소입니다.</a>
B = <b>B입니다.</b>
일 때, 위 코드 실행결과
<a>
<b>
B입니다.
</b>
A내부요소입니다.
</a>
태그 외부에서 뒷 부분에 추가하기
$(A).insertAfter(B);
$(B).after(A);B의 닫는 태그 뒷 부분에 A를 추가한다.
A = <a>A내부요소입니다.</a>
B = <b>B입니다.</b>
일 때, 위 코드 실행결과
<a>
A내부요소입니다.
</a>
<b>
B입니다.
</b>
태그 외부에서 앞 부분에 추가하기
$(A).insertBefore(B);
$(B).before(A);B의 여는 태그 앞 부분에 A를 추가한다.
A = <a>A내부요소입니다.</a>
B = <b>B입니다.</b>
일 때, 위 코드 실행결과
<b>
B입니다.
</b>
<a>
A내부요소입니다.
</a>
기존 요소를 복제해서 추가하기
// 기존의 B를 유지한 채 append실행
$(A).append(B.clone());B가 document상에 존재하던 요소일 때, append() 만 실행하면 원래 있던 B가 A뒤로 이동된다.
B.clone()을 append() 할 경우, 기존 B는 유지한 채 B와 같은 내용을 A뒤에 append() 한다.
댓글