append와 prepend의 차이(appendTo, prependTo 포함)

HTML

<div>

<p id="La">aa</p>

<p id="Lb">bb</p>

<p id="Lc">cc</p>

<input type="button" id="append" value="Append">

<input type="button" id="prepend" value="Prepend">

<input type="button" id="appendTo" value="AppendTo">

<input type="button" id="prependTo" value="PrependTo">

</div>

SCRIPT

$("#append").click(function(){

$("#Lb").append("<p>Append!</p>");

});

$("#prepend").click(function(){

$("#Lb").prepend("<p>Prepend!</p>");

});

$("#appendTo").click(function(){

$("<p>AppendTo!</p>").appendTo("#Lc");

});

$("#prependTo").click(function(){

$("<p>PrependTo!</p>").prependTo("#Lc");

});

결과

해석

$("#Lb").append("코드"); : Lb 뒤에 코드를 붙입니다.

$("#Lb").prepend("코드"); : Lb 앞에 코드를 붙입니다.

$("코드").appendTo("#Lc"); : 코드를 Lc 뒤에 붙입니다.

$("코드").prependTo("#Lc") : 코드를 Lc 앞에 붙입니다.

끝.