[jQuery] .append() 와 .appendTo() vs .prepend() 와 .prependTo() 의 차이

[jQuery] .append() 와 .appendTo() vs .prepend() 와 .prependTo() 의 차이

jQuery 에서 특정 엘리먼트 안에 텍스트(tag, string 모두 포함) 을 넣어야 하는 경우가 있다.

그럴 경우 사용하는 함수가 .append() 와 .appendTo() 또는 .prepend() 와 .prependTo() 함수 이다.

1. .append() 와 .appendTo()

.append() : $(A).append(B) // A 사이의 마지막에 B 가 추가 된다.

.appendTo() : $(A).appendTo(B) // A 가 B 사이의 마지막에 추가 된다.

아래 예제를 통해 정확하게 확인 해 보자.

[html]

<ul>

<li>리스트 항목 1</li>

<li>리스트 항목 2</li>

<li>리스트 항목 3</li>

<li>리스트 항목 4</li>

<li>리스트 항목 5</li>

</ul>

[script]

$('ul').append('<li><b>리스트 항목 append</b></li>');

$('<li><b>리스트 항목 appendTo</b></li>').appendTo('ul');

위 스크립트를 실행하면 결과는 다음과 같다.

2. .prepend() 와 .prependTo()

.prepend() : $(A).prepend(B) // A 사이의 처음에 B 가 추가 된다.

.prependTo() : $(A).prependTo(B) // A 가 B 사이의 처음에 추가 된다.

아래 예제를 통해 정확하게 확인 해 보자.

[html]

<ul>

<li>리스트 항목 1</li>

<li>리스트 항목 2</li>

<li>리스트 항목 3</li>

<li>리스트 항목 4</li>

<li>리스트 항목 5</li>

</ul>

[script]

$('ul').prepend('<li><b>리스트 항목 prepend</b></li>');

$('<li><b>리스트 항목 prependTo</b></li>').prependTo('ul');

위 스크립트를 실행하면 결과는 다음과 같다.