jQuery: append() vs appendTo()

Question

I am testing jQuery's .append() vs .appendTo() methods using following code:

$('div/>', {
    id : id,
    text : $(this).text()
    }).appendTo('div[type|="item"]#'+id);
$('div[type|="item"]#'+id).append($(this).text());

Note that the selectors are identical in .appendTo() and .append(), yet the latter works (within the same page), while the former does not. Why?

How do I get .appendTo() to work with this type of (complex) selector? Do the two methods interpolate differently? Is there some syntax I'm missing?

I don't want to clutter the post with impertinent code: suffice it to say that elements referenced by selectors exist, as is evidenced by the .append() method producing desired result. Let me know if more info is needed.

Thanks!

Another point is that you try to append a div with the same id as its container in the 1st case... — Samuel Caillerie, Nov 20 '12 at 17:14
Yes--I do not intend to use ID as a unique identifier; that being the case, any reason why this is a bad idea? — Yevgeniy, Nov 20 '12 at 17:29
Hum : this is a bad practice since it has been designed to be unique and that errors can occurred with some browsers when it is not the case. You can have a look at [the W3C site](http://www.w3.org/TR/CSS2/selector.html#id-selectors). — Samuel Caillerie, Nov 20 '12 at 17:35

score 54 · Accepted Answer · edited Sep 21 '18 at 17:44

To answer the question, you don't have an element to appendTo anything, as you're missing characters (in your case it's an opening angle bracket <).

This

$('div/>',{});

needs to be

$('<div/>',{});

to create an element, otherwise it does exactly what you say it does - nothing!

Otherwise you seem to have the order of things right, it's like this:

.append() inserts the content specified by the parameter, to the end of each element in the set of matched elements, as in
```
$(Append_To_This).append(The_Content_Given_Here);
```
while .appendTo() works the other way around: it insert every element in the set of matched elements to the end of the target given in the parameter, as in
```
$(The_Content_Given_Here).appendTo(Append_To_This);
```

There's also .prepend() and prependTo() which works exactly the same, with the only difference being that the prepended elements are added at the beginning of the target elements content instead of the end.

score 26 · Answer 2 · edited Oct 09 '15 at 09:10

26

append appends the parameter to the object you're working on.

appendTo appends the object you're working on to the parameter.

More info here: http://api.jquery.com/appendTo/

aside from that, there is something wrong here:

$('div/>',

this is not selecting anything.

edited Oct 09 '15 at 09:10

Legionar

7,472
2
41
70

answered Nov 20 '12 at 17:10

René Wolferink

3,558
2
29
43

Kannan J · Answer 3 · 2017-02-23T08:37:43.397

I faced similar query and on researching got some more insights. It was confusing to hear target, element etc and I prefer to visualise the outer selector as $container and element added as $widget. In plain english, I want to add widget to container. Both append and appendTo can be used in the following way and you get exact same result.

$container = $("#containerdiv");

$widget = $("<div> <h1 id='title'> widget </h1> </div>")

Approach 1 : $container.append($widget)

Approach 2 : $widget.appendTo($container)

The key difference is what gets returned. In the first case, $container is returned, and in second case, $widget is returned. This will be useful if you are chaining the request with another jquery statement. If you want to work with $container, use first construct and to work with widget, use the second way. For example,

if you want to append 2 widgets to the container, you would give

$container.append($widget1).append($widget2)

and if you want to add a widget and then widget's title to say 'Cool Widget', you would give

$widget.appendTo($container).find('#title').text("Cool Widget")

Sajad Afaghiy · Answer 4 · 2020-08-18T01:15:12.923

4

The appendTo() method is used to add additional content at the end of the selected elements. It is same as jQuery append() method. There is only syntactical difference between append() and appendTo() methods.

.appendTo() syntax:

$(content).appendTo(selector)

.append() syntax:

$(selector).append(content)

edited Aug 18 '20 at 01:15

answered Aug 18 '20 at 01:09

Sajad Afaghiy

524
5
12

score 2 · Answer 5 · answered Mar 04 '16 at 07:02

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

score 2 · Answer 6 · answered Feb 02 '17 at 12:58

The .append() method inserts the specified content as the last child of each element in the jQuery collection (To insert it as the first child, use .prepend()).

The .append() and .appendTo() methods perform the same task. The major difference is in the syntaxspecifically, 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.

score 2 · Answer 7 · answered May 12 '17 at 10:40

To make this two easier to understand.

Suppose I have A B C three ordered charters.

A append C means MOVE C before A, this results C's reloaction but not A, so we have C A B.

A appendTO C means MOVE A after C, this results A's relocation but not C, so we have B C A.

Both of append and 'appendTo' has the same result of 甲 and 丙, but the whole order of the three charters changes.
Due to the relocation of OOO.appendTo(XXX), the XXX should be exists before this control.

*A* `append` *C* means append *C* to *A* so end result will be **ACB**. *A* `append` *C* is the same as *C* `appendTo` *A*. — CodingYoshi, Jul 29 '21 at 19:12

score 1 · Answer 8 · answered Aug 13 '15 at 23:27

1

$('#someDiv').append(someStuff); someStuff.appendTo($('someDiv')); //same result here, just different way to do it depending on your sitch

answered Aug 13 '15 at 23:27

user1142121

49
4

score 1 · Answer 9 · answered Aug 07 '18 at 17:59

1

Return result is the only difference and it makes appendTo handier for methods-chaining:

$("<div>...</div>").appendTo(target).hide();  //hide new-element, not the whole target

answered Aug 07 '18 at 17:59

MetNP

561
5
12

score 0 · Answer 10 · answered Nov 03 '13 at 06:49

0

The .append() and .appendTo() methods perform the same task and only target and html content to be inserted syntax will chnage . go through http://api.jquery.com/appendTo/

answered Nov 03 '13 at 06:49

user2949337

9
1

jQuery: append() vs appendTo()

10 Answers10

Linked