[jQuery] append() appendTo() 와 prepend() prependTo()

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

웹 개발을 하다 보면 웹 페이지를 동적으로 만들어야 할 경우가 많이 있는데 그러한 경우에 사용할 수 있는 함수 들입니다.

(버튼을 클릭 했을 때, 웹페이지의 형태를 바꿔야 한다 등)

우선, append(appendTo)와 prepend(prependTo) 를 비교하자면

append 와 appendTo 는 새로운 요소를 타겟(Target)에 해당하는 요소 마지막에 추가 해주고,

prepend 와 prependTo 는 새로운 요소를 타겟(Target)에 해당하는 요소 처음 부분에 추가 해줍니다.

append(), appendTo(), prepend(), prependTo() 를 사용할 경우,  부모자식관계가 생성됩니다.

append() 와 appendTo()

.append()와 .appendTo() 함수는 동일한 기능을 하지만, 추가될 컨텐츠와 타겟의 위치가 두 함수의 가장 큰 차이점입니다.

$( target ).append( 추가할 내용);

$( 추가할 내용 ).appendTo( target );

prepend() 와 prependTo()

.prepend() 와 .prependTo() 역시 함수의 기능은 동일 하지만, 추가될 컨텐츠와 타겟의 위치가 다릅니다.

$( target ).prepend( 추가할 내용);

$( 추가할 내용 ).prependTo( target );

아래의 간단한 예제를 실행해보면 어떠한 차이가 있는지 한눈에 파악할 수 있습니다.

HTML

<button id="btn1">append</button>

<button id="btn2">appendTo</button>

<button id="btn3">prepend</button>

<button id="btn4">prependTo</button>

<p id="text">TEXT</p>

SCRIPT

$('#btn1').click(function() {

$('#text').append('<span>appendText</span>')

});

$('#btn2').click(function() {

$('<span>appendToText</span>').appendTo('#text')

});

$('#btn3').click(function() {

$('#text').prepend('<span>prependText</span>')

});

$('#btn4').click(function() {

$('<span>prependToText</span>').prependTo('#text')

});