使用jQuery append()方法向表单中添加按钮

Question

我需要在表单中添加一个按钮。我无法控制创建表单本身的逻辑...但是如果需要，我可以在表单周围添加代码。 表单的代码如下：

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

我知道我可以在整个表单周围添加一个div并附加到其中...但我希望新按钮出现在“登录”按钮旁边。 我尝试了以下代码，但它没有起作用：

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

我假设您可能无法将内容添加到按钮中...这就是为什么它没有起作用的原因。

我仍在学习jquery，如果除了append之外还有其他方法可用，我愿意倾听！实际上，按钮不必成为表单的一部分，因为当单击它时，我将运行客户端代码。但它确实必须出现在登录按钮旁边。

谢谢。

- dot

---

注意，应避免使用 name="submit"，因为如果直接调用（例如 form.submit()），它可能会干扰表单的提交方法。 - Kevin B

Answer 1

您无法向输入元素添加任何内容。

请使用 .after 或 .before。

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

- Sushanth --

---

我尝试过了，但它并没有创建任何按钮。我正在检查Firefox中的F12...在控制台下，我没有看到任何错误。脚本也没有。 - dot

实际上，不用管了。我找到错误了。缺少 ); 它可以工作了！ - dot

Answer 2

try this instead: jsFiddle

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

- Justin

Answer 3

你可以像这样使用.after

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

或者

$('form').append('<input type="button" value="test" />');

- Adil Shaikh