Using jquery append () to add a button to a form


I need to add a button to a form. I have no control over the logic that creates the form itself... but i can add code around the form, if need be.

The code for the form looks like this:

<form action="/cgi-bin/a/logon" method="POST">
     <DT>Login ID</DT>
          <input class=" text" type="text"  name="id"  value="">
          <input class=" password" type="password"  name="password"  value="">
       <DD><input class="submit" type="submit" name="submit" value="Logon">

I know I can add a div around the entire form and append to that... but I would like the new button to appear right beside the "Logon" button. I've tried the following code, but it didn't work:

<script type="text/javascript">
        $(document).ready(function() {
           $('.submit').append($('<input type="button" value="test">'));

I'm assuming you probably can't append to a button... which is why it didn't work.

I'm still learning jquery so if there's another method aside from append that I could use, I'm all ears! Actually, the button doesn't have to be a part of the form because I'm going to run client side code when it is clicked. But it does have to appear beside the login button.


you cannot append anything to the input element ..

Use .after or .before

 $('.submit').after($('<input type="button" value="test">'));