[jQuery] 요소의 추가 .append(), .appendTo(), .prepend(), .prependTo(), .before(), .insertBefore(), .insertAfter()

*append: (글에) 덧붙이다, 첨부하다.

*prepend: 접두어을 붙이다, 다른것에 표현이나 구문을 덧붙이다.

*insert: (다른 것 속에둘 사이에) 끼우다[넣다/삽입하다]

 

See the Pen [jQuery] .append(), .appendTo(), .prepend(), prependTo() by mill (@millfeel) on CodePen.

 

 

---

.append()

$(target).append(source);

target의 마지막에 source(새로운 요소나 콘텐츠)를 추가한다.

---

.appendTo()

$(source).appendTo(target);

source(새로운 요소나 콘텐츠)를 target의 마지막에 추가한다.

---

Q. .append()와 .appendTo()의 차이는?

.append()는 target을 정하고 source를 선택하고, .appendTo()는 source를 선택을 하고, target을 정한다.

---

.preprend()

$(target).prepend(source);

target의 첫번째에 source(새로운 요소나 콘텐츠)를 추가한다.

---

.preprendTo()

$(source).prependTo(target);

source(새로운 요소나 콘텐츠)를 target의 첫번째에 추가한다.

---

메소드	설명
.before()	선택한 요소의 바로 앞쪽에 새로운 요소나 콘텐츠를 추가한다.
.insertBefore()	선택한 요소를 해당 요소의 앞쪽에 추가한다.
.after()	선택한 요소의 바로 뒤쪽에 새로운 요소나 콘텐츠를 추가한다.
.insertAfter()	선택한 요소를 해당 요소의 뒤쪽에 추가한다.

*원리는 append와 appendTo와 같다.