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

Question

There is not much difference between these functions, except for the syntax:

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

As the jQuery docs said :

The .append () and .appendTo () methods perform the same task. The main difference lies in the syntax, in particular, when placing content and goals. When using .append (), the selector expression preceding this method is the container into which the content is pasted. With .appendTo (), on the other hand, the content precedes the method, either as an expression of choice or as markup created on the fly, and it is inserted into the target container.

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

The same question applies to:

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

Answer 1

You said it yourself - there is not much difference. However, my choice of what to use usually depends on the chain of methods, if you already have links to your elements.

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 2

When you create an element, it smooths the use of .appendTo equivalents

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

against

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

Answer 3

I think there are two main points:

• Already have links? If you already have a jQuery object containing the elements you want to add, it makes sense to use .appendTo() instead of selecting the elements you want to add, and then using .append() .

• Do you need / need chain functions? One of the things jQuery does well is to combine functions because each function returns a jQuery object. Obviously, if you want to call functions on the elements you add, you want to use .appendTo() so that any functions that you link after that apply to the added elements, and not to the added elements.

Answer 4

In the context

• Personally, I use two functions depending on which set of commands my function performs or where they are used ( context ), the way you read the code may change the way you prefer to write code, and it may feel better or subjectively subjective .

In any case, this is quite literal, and I believe that I write each automatically without thinking.

In each context, if the object 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 object of the function is new content, then

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

makes more sense.

---

Function Chains

• It is also important to note that this makes sense when the binding functions are also in each case. i.e. if you are already dealing with an element

---

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

---

makes more sense than adding another line and vice versa.

Resources

• . append () (jquery documentation)

• . appendTo () (jquery documentation)

• good blog post on the topic (see. The difference between .append () and .appendTo ())

Answer 5

As they say, basically append () and appendTo give the same results. However, when you start the result chain, you can see the difference!

Target HTML:

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

First add append ():

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

It produces:

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

Second with appendTo ()

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

It produces:

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

Answer 6

This is useful when you combine multiple jQuery actions. So:

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

or

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

the two are different actions, so it’s good to have both of them.

Answer 7

This is mainly a matter of taste.

One of the situations where appendTo more convenient is when you refer to an element and not to a jQuery object, for example, in the variable dest :

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

To use the append method, you must create a jQuery object for an element that can call it:

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