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

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().

Newborn

You have listed the exact difference, what more to you want ? – Nissy

I need short examples where fit only one of those two functions and the other is not good enough. – Newborn

If you are using chaining to apply another method, it will always target the first selector. $('.target').append('<div>Hello</div>').hide() will hide the .target elements after appending the div. $('<div>Hello</div>').appendTo('.target').hide() will hide the div after appending it to .target. – Pretoria

@Pretoria [+1] thank you for your answer, I got it. The main point is in chaining. Different elements will be affected by functions in chain and both (.append and .appendTo) are needed for better code readability. – Newborn

Answer 1

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

Lustick

Answer 2

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

Baud

Never seen the {text} format. Why not just $( '<div>hello</div>' )? Does that make if feel less like an .innerHTML call? :) – Festal

@Festal that would invoke html parser instead of simply creating an element. Also, if you have a lot of dynamic attributes, it's a lot easier to write some-attribute: variable than mess with the quotes like some-attribute="'+variable+'"... You can see these are slow to begin with jsperf.com/domvsparser232 – Baud

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.

Avionics

Answer 4

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

Amrita

Answer 5

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>

Barnie

Answer 6

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.

Paramorph

Answer 7

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

Piecemeal