Search code examples
javascriptjqueryappendprependjquery-after

.append(), prepend(), .after() and .before()

I am pretty proficient with coding, but now and then I come across code that seems to do basically the same thing. My main question here is, why would you use .append() rather then .after() or vice verses?

I have been looking and cannot seem to find a clear definition of the differences between the two and when to use them and when not to.

What are the benefits of one over the other and also why would i use one rather then the other?? Can someone please explain this to me?

var txt = $('#' + id + ' span:first').html();
$('#' + id + ' a.append').live('click', function (e) {
    e.preventDefault();
    $('#' + id + ' .innerDiv').append(txt);
});
$('#' + id + ' a.prepend').live('click', function (e) {
    e.preventDefault();
    $('#' + id + ' .innerDiv').prepend(txt);
});
$('#' + id + ' a.after').live('click', function (e) {
    e.preventDefault();
    $('#' + id + ' .innerDiv').after(txt);
});
$('#' + id + ' a.before').live('click', function (e) {
    e.preventDefault();
    $('#' + id + ' .innerDiv').before(txt);
});
Solution

  • 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>

    Fiddle with .before() in execution.