jQuery Forum

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.