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!

Lassa

Another point is that you try to append a div with the same id as its container in the 1st case... – Apprise

Yes--I do not intend to use ID as a unique identifier; that being the case, any reason why this is a bad idea? – Lassa

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. – Apprise

Answer 1

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.

Schottische

Answer 2

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.

Admit

Answer 3

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

Fated

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

Postrider

Answer 5

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.

Enterostomy

Answer 6

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.

Empson

Answer 7

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.

Smitherman

A append C means append C to A so end result will be ACB. A append C is the same as C appendTo A. – Tate

Answer 8

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

Loaning

Answer 9

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

Lind

Answer 10

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/

Denver