.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);
});
Answer
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>