JQuery copy and paste DOM node?

Question

I have a table that looks like this.

<tr> <td>Link Name</td> <td><a href="#" class="edit">Edit</a></td> </tr> 

At the bottom of the table, I have the following.

 <tr> <form class="hidden create"> <h3>Add Link</h3> ... <input type="hidden" name="form_id" value="{menu-id}" /> </form> </tr> 

To avoid a massive HTML page, I thought it would be great if jquery could copy the creation form, set up several attributes, and then do it after the link bar. The only request really is how ..

So here are my questions.

1) How can I capture the creation form and save it as a variable using jquery?

2) How to edit a hidden field? I know how to change attributes, but how to select a field when the form is inside a variable?

3) How to insert this form into my table after the edit link in my row? Do I need something like parent-parent-after?

Thanks to the loads

Answer 1

1) Put a copy of the form in a variable:

 var create_form = $('form.create').clone(); 

2) Get the hidden input from the variable:

 create_form.find(':hidden[name=form_id]').doSomething()... 

3) Place the form after the .edit link on the same line (I assume this is in the event handler):

 $(this).closest('tr').find('a.edit').after( create_form ); 

Answer 2

 var form = $('#your-form').clone(); 

Creates a copy of the selected items. The original is not processed if you are now using form -variable.

Editing hidden fields works just like manipulating other DOM elements:

 form.attr('action', 'some-new-action'); 

You can "paste" your form using several methods. Possible solutions:

 form.appendTo('#some-parent'); form.after('#some-parent'); 

Answer 3

visit the detailed explanation http://api.jquery.com/clone/ .

This is a quick look.

HTML

 <div class="container"> <div class="hello">Hello</div> <div class="goodbye">Goodbye</div> </div> 

Javascript

 $('.hello').clone().appendTo('.goodbye'); 

Exit

 <div class="container"> <div class="hello">Hello</div> <div class="goodbye"> Goodbye <div class="hello">Hello</div> </div> </div> 

Hope this helps.