jquery after method not returning generated element

Question

In the following code:

var genContent = "<tr><td>please wait!!!</td></tr>";
var outputElement = $("#projectsTable tr:first").after(genContent);
myForm = $(this).find("form");
submitForm(myForm, outputElement);

I expect outputElement to be the element generated by the after method from jquery, but for some reason outputElement is refering to the table headers.

What do I need to do to get the newly generated element?

Answer 1

You need to use .insertAfter() if you want outputElement to refer to the tr element

var = "<tr><td>please wait!!!</td></tr>";
var outputElement = $(genContent).insertAfter("#projectsTable tr:first");
myForm = $(this).find("form");
submitForm(myForm, outputElement);

Answer 2

The after method inserts element(s) after the current selection, and returns that same current selection. So it does not change the selection. If you need the elements that you want to insert, maybe create a jQuery object of it, and insert that.

var genContent = "<tr><td>please wait!!!</td></tr>";
var outputElement = $(genContent);
$("#projectsTable tr:first").after(outputElement);