Access new appended DOM element

Access new appended DOM element

Hello there,

I'm trying to create a form with an undefined number of elements.
It's in a table, the "add" capability came from a choice, and I want to insert the new element (my "test" row actually) just before the 'adder' element (created with jQuery). So my actual code is:
  1. jQuery(function($){
  2.     $("input[name='ptype']").change(function() {
  3.         var adder = document.createElement('tr');
  4.         adder.setAttribute('id', 'adder_1_1');
  5.         adder.innerHTML = '<td class="trow1">Add :</td><td class="trow2"><a href="#" id="nserie">Sub-Serie</a> | <a href="#" id="nElem" onclick="newElem(\'1_1\');">Element</a></td>';
  6.         $('#actbutton').before($(adder));
  7.     });
  8. })
  9. function newElem(ind) {
  10.     $('#adder_'+ind).before('<tr id="test"><td class="tcat" colspan="2">test ok</td></tr>');
  11.     return false;
  12. };
$('#adder_1_1') is not recognised, I can get document.getElementById('adder_1_1') but it's not a jQuery object, so I can't use .before() on it.

This is just a test, but when finished I'll had to allow add multiple "adder" rows and place new elements before them (depending on which "add link" is clicked. So I need to be able to have a reference to this row and use the .before() method.

Thanks for your answers and tips.