CODEWITHSUNDEEP
jqueryappendprepend
webvitaly
webvitaly

Reputation: 4271

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

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:

Upvotes: 8

Views: 1238

Answers (7)

Fredz
Fredz

Reputation: 19

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>

Upvotes: 1

Michael Zaporozhets
Michael Zaporozhets

Reputation: 24526

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

Upvotes: 1

Guffa
Guffa

Reputation: 700302

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

Upvotes: 0

Anthony Grist
Anthony Grist

Reputation: 38345

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.

Upvotes: 1

Rodik
Rodik

Reputation: 4092

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.

Upvotes: 0

Richard Neil Ilagan
Richard Neil Ilagan

Reputation: 14747

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

Upvotes: 3

Esailija
Esailija

Reputation: 140220

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

Upvotes: 2

Related Questions