In which case it is better to use the .append(), a

Question

There is no big difference between those functions except the syntax:

$('.target').append('text');
$('text').appendTo('.target');

As said in jQuery docs:

The .append() and .appendTo() methods perform the same task. The major difference is in the syntax-specifically, in the placement of the content and target. With .append(), the selector expression preceding the method is the container into which the content is inserted. With .appendTo(), on the other hand, the content precedes the method, either as a selector expression or as markup created on the fly, and it is inserted into the target container.

So in which case it is better to use the .append(), and which .appendTo()? In which code-samples fit only one of those two functions and the other is not good enough?

The same question applies to:

• .prepend() vs .prependTo()
• .before() vs .insertBefore()
• .after() vs .insertAfter().

Answer 1

In context

• Personally I use the two functions depending on what set of instructions my function is doing or where they are used (the context), the way you read the code may change the way you prefer to write the code and it may feel better either way subjectively to your own.

Either way, it's fairly literal and i find myself writing each automatically without thinking.

In each context, if the subject is the area you are manipulating,

---

$(target).append(content)
//within a function based around manipulating a specific area

seems to make more sense whereas if the subject of the function is new content then

$(content).appendTo(target);
//appending data to something

makes more sense.

---

Chaining Functions

• It is also important to note that it makes more sense when chaining functions in each case aswell. ie. if you are already dealing with an element

---

$(target).toggle().append(content);

---

makes more sense than adding another line and vice versa.

Resources

• .append() (the jquery documentation)

• .appendTo() (the jquery documentation)

• a good blog post on the topic (see Difference between .append() and .appendTo() )

Answer 2

It's useful for when you chain a few jQuery actions together. like so:

$('.target').css({display:"block"}).fadeOut().appendTo('.somewhere');
// appends target to somewhere

or:

$('.target').css({display:"block"}).fadeOut().append('.somewhere');
// appends somewhere to target

those two are different actions, hence it is useful to have them both.

Answer 3

You said it yourself --- there's not much difference. My choice of what to use, however, normally depends on method chaining, provided you already have your elements referenced.

i.e.

var _target, _content;

_target.append(_content).addClass('foo');
// will add the foo class to _target

_content.appendTo(_target).addClass('foo');
// will add the foo class to _content

Answer 4

I think there are two main points to consider:

1. What do you already have references to? If you already have a jQuery object containing the elements you want to append then it makes sense to use .appendTo() rather than selecting the elements you want to append to and then using .append().

2. Do you want/need to chain functions? One of the things that jQuery does well is allow you to chain functions together, because every function returns a jQuery object. Obviously if you want to call functions on the elements that you're appending, you'll want to use .appendTo() so that any functions you chain after that will apply to the elements being appended, not the elements being appended to.

Answer 5

It's mostly a matter of taste.

One situation where appendTo is more convenient is when you have a reference to an element rather than a jQuery object, for example in the variable dest:

$("<div/>").appendTo(dest);

To use the append method you have to create a jQuery object for the element to be able to call it:

$(dest).append($("<div/>"));

Answer 6

When you are creating an element, it's smoother to use .appendTo equivalents

$("<div>", {text: "hello"}).appendTo("body");

vs

$("body").append( $("<div>", {text: "hello" }) /*Awkward having to call jQuery constructor here*/);