[제이쿼리] .prepend() .prependTo() .append() .appendTo() .InsertAfter() .after() .InsertBefore() .before()

.prepend() / .prependTo() / .append() / .appendTo()

일치하는 요소 집합의 각 요소의 시작 부분에 매개 변수에 의해 지정된 내용을 삽입합니다.

.prepend() 함수는 jQuery집합체 안에 있는 각 요소의 첫번째 자식 요소에 값을 삽입합니다.

.prepend()와 .pependTo() 함수의 기능은 동일합니다. 가장 큰 차이점은 문법의 차이입니다. .prepend()는, 함수 앞에 선택자 표현을 하고 선택된 요소에 함수의 인자인 내용이 삽입됩니다. 반면, .prependTo()는, 함수의 인자로 선택자가 전달되어 요소를 선택한 후 함수 앞이 내용이 삽입됩니다.

.append() 함수는 jQuery 집합의 각 요소별로 마지막 자식 요소를 추가해주는 함수입니다.

.append()와 .appendTo() 함수의 기능은 동일합니다. 컨텐츠(추가될 자식요소)와 타켓(추가될 부모요소)의 위치에 대한 부분이 중요한 차이점입니다. append() 함수는 함수 앞의 표현으로 컨테이너를 구성된 타겟에 컨텐츠를 추가합니다. 반면 .appendTo() 함수는 컨텐츠가 함수 앞에 위치하고 타겟이 뒤에 위치하게 됩니다.

즉, .append()함수는 A.append(B)라면 A에 B를 추가하는 것이고,

A.appendTo(B)는 B에 A를 추가하는 것입니다.

https://jsfiddle.net/Kimara/ysobjgL9/5/

.InsertAfter() / .after() / .InsertBefore() / .before()

.after()

어떤 요소 뒤에 새로운 요소를 추가합니다.

.insertAfter()

조건에 일치되는 요소 뒤에 target에 해당되는 요소를 삽입합니다.

.after()와 .insertAfter() 함수는 동일한 기능을 합니다. 중요한 차이점은 내용과 대상의 위치 차이에 있습니다.

A.after(B)라면 A뒤에 B를 추가하는 것이고

A.insertAfter(B)는 B뒤에 A를 추가하는 것입니다.

.before()

어떤 요소 앞에 새로운 요소를 추가합니다.

.insertBefore()

타겟 앞에 조건에 일치되는 요소를 삽입합니다.

.before()와 .insertBefore() 함수는 동일한 기능을 합니다. 중요한 차이점은 내용과 대상의 위치 차이에 있습니다. .before()는 이 함수 앞에 표현된 선택자이고 그 앞에 내용이 삽입됩니다. 반면 .insertBefore()는 함수 앞에 내용이 함수의 인자로 주어진 타켓 요소 앞에 삽입됩니다.

https://jsfiddle.net/Kimara/ysobjgL9/7/