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!

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.