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

Asked 13/2, 2013 at 4:42 Answered 21/12, 2014 at 12:57

Solved javascript jquery append prepend jquery-after

233

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

Bielefeld answered 13/2, 2013 at 4:42 Comment(2)

i never use append which (use to?) bugs ie, i use appendTo that seems alsomore correct semantically especially since there's after (chain chain chain) - nb: after is after not within – Mikimikihisa 13/2, 2013 at 4:49

Sounds like what you really want to know is why to choose append vs after to achieve the same result. Say you have <div class='a'><p class='b'></p></div>. Then $('.a').append ('hello') would have the same affect as $('.b').after('hello'). Namely: <div class='a'><p class='b'></p>'hello'</div>. In that case, it doesn't matter. The resulting html is the same, so choose append or after depending on what selector is most convenient to construct in your code. – Mab 9/9, 2017 at 23:37

496

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.

Memo answered 13/2, 2013 at 4:58 Comment(5)

@joraid updated the answer as per your comment with some js fiddle links in execution. – Memo 2/4, 2014 at 10:43

great explanation, but what if i want to load in an external html view? Using MVC like so: $("#viewPlaceHolder").append("/clients/RelationDropdown", {selected: selected }); – Focus 23/10, 2015 at 19:37

@Focus .append() will not load it that way. You have to use .load(url, params). – Memo 26/10, 2015 at 7:4

Nice! Can I also ask about the difference between '$(element).append(content)' and '$(content).appendTo(target)', and the like? (I don't want to start a new thread in this!) – Petcock 23/8, 2017 at 17:33

When you've answers like this ( well explained), you get a breather! – Cascarilla 15/2, 2023 at 19:56

149

This image displayed below gives a clear understanding and shows the exact difference between .append(), .prepend(), .after() and .before()

jQuery infographic

You can see from the image that .append() and .prepend() adds the new elements as child elements (brown colored) to the target.

And .after() and .before() adds the new elements as sibling elements (black colored) to the target.

Here is a DEMO for better understanding.

EDIT: the flipped versions of those functions:

Using this code:

var $target = $('.target');

$target.append('<div class="child">1. append</div>');
$target.prepend('<div class="child">2. prepend</div>');
$target.before('<div class="sibling">3. before</div>');
$target.after('<div class="sibling">4. after</div>');

$('<div class="child flipped">or appendTo</div>').appendTo($target);
$('<div class="child flipped">or prependTo</div>').prependTo($target);
$('<div class="sibling flipped">or insertBefore</div>').insertBefore($target);
$('<div class="sibling flipped">or insertAfter</div>').insertAfter($target);

on this target:

<div class="target">
    This is the target div to which new elements are associated using jQuery
</div>

So although these functions flip the parameter order, each creates the same element nesting:

var $div = $('<div>').append($('<img>'));
var $img = $('<img>').appendTo($('<div>'))

...but they return a different element. This matters for method chaining.

Sicilia answered 21/12, 2014 at 12:57 Comment(3)

very easily understandable picture. :) – Scorcher 12/10, 2017 at 6:3

Upvoted! If I ask then what about the appendTo and prependTo in picture? Please update. – Overshoe 27/4, 2018 at 10:51

I keep referring to your infographic. Hope you like the addition of the flipped functions. – Monicamonie 20/12, 2018 at 18:7

append() & prepend() are for inserting content inside an element (making the content its child) while after() & before() insert content outside an element (making the content its sibling).

Riordan answered 13/2, 2013 at 4:54 Comment(0)

The best way is going to documentation.

`.append()` vs `.after()`

.append(): Insert content, specified by the parameter, to the end of each element in the set of matched elements.
.after(): Insert content, specified by the parameter, after each element in the set of matched elements.

`.prepend()` vs `.before()`

prepend(): Insert content, specified by the parameter, to the beginning of each element in the set of matched elements.
.before(): Insert content, specified by the parameter, before each element in the set of matched elements.

So, append and prepend refers to child of the object whereas after and before refers to sibling of the the object.

Outride answered 13/2, 2013 at 4:59 Comment(0)

There is a basic difference between .append() and .after() and .prepend() and .before().

.append() adds the parameter element inside the selector element's tag at the very end whereas the .after() adds the parameter element after the element's tag.

The vice-versa is for .prepend() and .before().

Fiddle

Verbal answered 13/2, 2013 at 5:2 Comment(0)

There is no extra advantage for each of them. It totally depends on your scenario. Code below shows their difference.

    Before inserts your html here
<div id="mainTabsDiv">
    Prepend inserts your html here
    <div id="homeTabDiv">
        <span>
            Home
        </span>
    </div>
    <div id="aboutUsTabDiv">
        <span>
            About Us
        </span>
    </div>
    <div id="contactUsTabDiv">
        <span>
            Contact Us
        </span>
    </div>
    Append inserts your html here
</div>
After inserts your html here

Franciscafranciscan answered 13/2, 2013 at 5:20 Comment(0)

<div></div>    
// <-- $(".root").before("<div></div>");
<div class="root">
  // <-- $(".root").prepend("<div></div>");
  <div></div>
  // <-- $(".root").append("<div></div>");
</div>
// <-- $(".root").after("<div></div>");
<div></div>

Ferretti answered 2/10, 2014 at 16:8 Comment(0)

Imagine the DOM (HTML page) as a tree right. The HTML elements are the nodes of this tree.

The append() adds a new node to the child of the node you called it on.

Example:$("#mydiv").append("<p>Hello there</p>") 

creates a child node <p> to <div>

The after() adds a new node as a sibling or at the same level or child to the parent of the node you called it on.

Pellmell answered 17/11, 2013 at 16:42 Comment(0)

To try and answer your main question:

why would you use .append() rather then .after() or vice verses?

When you are manipulating the DOM with jquery the methods you use depend on the result you want and a frequent use is to replace content.

In replacing content you want to .remove() the content and replace it with new content. If you .remove() the existing tag and then try to use .append() it won't work because the tag itself has been removed, whereas if you use .after(), the new content is added 'outside' the (now removed) tag and isn't affected by the previous .remove().

Guadalquivir answered 26/7, 2014 at 12:21 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

See:

suppose:

when .append() executes it will look like this:

Fiddle with .append() in execution.

when .prepend() executes it will look like this:

Fiddle with .prepend() in execution.

using after:

Fiddle with .after() in execution.

using before:

Fiddle with .before() in execution.

.append() vs .after()

.prepend() vs .before()

To try and answer your main question:

why would you use .append() rather then .after() or vice verses?

Recommended topics

Hot tags

when `.append()` executes it will look like this:

when `.prepend()` executes it will look like this:

`.append()` vs `.after()`

`.prepend()` vs `.before()`