why doesnt this jquery code work?

Question

i thought this code should work but it didnt, can someone explain?

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

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

Answer 1

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

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

Answer 2

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

Answer 3

You can change it to

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

Answer 4

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());

Answer 5

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());
});