appendTo() is not a function?

I thought this code should work but it didnt, can someone开发者_Python百科 explain?

 $("#addLinkLayout input.comment, #addLinkLayout input.link").each(function() {
      $(this).val().appendTo('div#links');
 });

It says $(this).val().appendTo() is not a function.

appendTo can only be applied on jQuery objects. But val returns a string.

Try this instead:

$("#addLinkLayout input.comment, #addLinkLayout input.link").each(function() {
    $('div#links').append($(this).val());
});

val() doesn't return a DOM element. It returns the value attribute from a DOM element. So if you have something like <input value="foo" />, calling val() on that node will give you a string "foo". Since javascript's string class doesn't have a method appendTo, you're getting an error.

You probably want something like

$('div#links').append($(this).val());

val returns a string, not a jQuery object, try:

$('div#links').append($(this).val());

$(this).val() doesn't return a jQuery object (it returns the value of the input element). So it can't be chained.

You can change it to

$("#addLinkLayout input.comment, #addLinkLayout input.link").each(function() {
  $('div#links').append($(this).val());
});