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:
- jQuery(function($){
- $("input[name='ptype']").change(function() {
- var adder = document.createElement('tr');
- adder.setAttribute('id', 'adder_1_1');
- 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>';
- $('#actbutton').before($(adder));
- });
- })
- function newElem(ind) {
- $('#adder_'+ind).before('<tr id="test"><td class="tcat" colspan="2">test ok</td></tr>');
- return false;
- };
$('#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.