Jquery copy and paste DOM node?

Question

Hi, I have a table that looks like the following.

<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 page of HTML I thought it would be cool if jquery could copy the create form, tweak a few attributes then make it appear after the links row. The only query really is how..

So here are my questions.

1) How do I grab the create form and save it as variable with jquery?

2) How do I edit the hidden field? I know how to change attributes but how do I select the field it once the form is within a variable?

3) How do I paste this form into my table after the edit link on its own row? I need something like parent-parent-after?

Thanks loads

Answer 1

1) Place 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 form after .edit link in the same row (I assume this is in an event handler):

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

Answer 2

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

This creates a copy of the selected elements. The original is not manipulated if you use the form-variable now.

Editing hidden fields works exactly like manipulating other DOM-elements:

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

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

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