Dynamically adding HTML form field using jQuery

What seems to be confusing this thread is the difference between:

$('.selector').append("<input type="text"/>"); 

Which appends the target element as a child of the .selector.

And

$("<input type="text" />").appendTo('.selector');

Which appends the target element as a child of the .selector.

Note how the position of the target element & the .selector change when using the different methods.

What you want to do is this:

$(function() {

  // append input control at start of form
  $("<input type="text" value="" />")
     .attr("id", "myfieldid")
     .attr("name", "myfieldid")
     .prependTo("#form-0");

  // OR

  // append input control at end of form
  $("<input type="text" value="" />")
     .attr("id", "myfieldid")
     .attr("name", "myfieldid")
     .appendTo("#form-0");

  // OR

  // see .after() or .before() in the api.jquery.com library

});