[jQuery] append()

Hello,

I'm having some problems understanding the append() function.

What I'd like to do is select an element using it's ID and add a row to
the table with a HTML form element.

The table is dynamically generated using a Django template
( form.as_table() ) so I'm not able to alter the original HTML markup
too much.

If I had a table like this...

<tr><th><label for="id_task_name">Task Name:</label></th><td><input
type="text" name="task_name" id="id_task_name" /></td></tr>
<tr><th><label for="id_percent_complete">Percent
complete:</label></th><td><input type="text" name="percent_complete"
id="id_percent_complete" /></td></tr>
<tr><th><label for="id_start_date">Start Date:</label></th><td><input type="text" name="start_date" id="id_start_date" /></td></tr>
<tr><th><label for="id_finish_date">Finish Date:</label></th><td><input type="text" name="finish_date" id="id_finish_date" /></td></tr>
<tr><th><label for="id_cost">Cost:</label></th><td><input type="text" name="cost" id="id_cost" /></td></tr>
<tr><th><label for="id_history">Task History:</label></th><td><textarea id="id_history" readonly="True" rows="10" cols="40" name="history"></textarea></td></tr>

... I could select the right part of the markup with

$("#id_percent_complete").append("<tr><th>New Label</th><td>New Form Element</td></tr>")

But as the documentation says it appends to the inside of the matched element, rather than adding it to the end. Because the element
I have selected is a <input> it attaches my new content inside a </input> which isn't the result I am after.

Apologies if the above is confusing - can anyone help?

Thanks

~sm