In which case it is better to use the .append(), and which .appendTo()?

Question

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

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

A

Answer 1

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

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 4

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*/);

Answer 5

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 6

Like they say, mostly append() and appendTo produce the same results. However, when you start chaining the result, you can see a difference!

Target HTML:

<DIV class=.inner1><SPAN></span><SPAN></span></div>
<DIV class=.inner2><SPAN></span><SPAN></span></div>

First with append():

$( ".inner1" )
  .append   ( "<p>Test</p>" )
  .addClass ( "addBorder" );

Produces:

<DIV class="inner1 addBorder"><SPAN></span><SPAN></span>
<P>Test</p>
</div>

Second with appendTo()

$( "<p>Test</p>" )
.appendTo ( ".inner2" )
.addClass ( "addBorder" );

Produces:

<DIV class="inner2">
    <SPAN></span><SPAN></span>
    <P class="addBorder">Test</p>
</div>