See:
.append() puts data inside an element at last index and
.prepend() puts the prepending elem at first index
suppose:
<div class="a"> //<---you want div c to append in this
<div class="b">b</div>
</div>
when .append() executes it will look like this:
$('.a').append($('.c'));
after execution:
<div class="a"> //<---you want div c to append in this
<div class="b">b</div>
<div class="c">c</div>
</div>
Fiddle with .append() in execution.
when .prepend() executes it will look like this:
$('.a').prepend($('.c'));
after execution:
<div class="a"> //<---you want div c to append in this
<div class="c">c</div>
<div class="b">b</div>
</div>
Fiddle with .prepend() in execution.
.after() puts the element after the element
.before() puts the element before the element
using after:
$('.a').after($('.c'));
after execution:
<div class="a">
<div class="b">b</div>
</div>
<div class="c">c</div> //<----this will be placed here
Fiddle with .after() in execution.
using before:
$('.a').before($('.c'));
after execution:
<div class="c">c</div> //<----this will be placed here
<div class="a">
<div class="b">b</div>
</div>