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

score 49 · Accepted Answer

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 24 · Accepted Answer

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.

score 7 · Accepted Answer

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

score 2 · Accepted Answer

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 · Accepted Answer

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.

score 1 · Accepted Answer

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

score 1 · Accepted Answer

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 1 · Accepted Answer

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)

score 0 · Accepted Answer

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/

score 0 · Accepted Answer

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

jquery - jQuery: append() vs appendTo()

10 回答 10

Related

Reference