使用 jquery append() 向表单添加按钮答案

【问题标题】：using jquery append() to add a button to a form使用 jquery append() 向表单添加按钮
【发布时间】：2013-05-15 09:26:33
【问题描述】：

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

表单的代码如下所示：

<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 之外还有其他方法我可以使用，我会全力以赴！实际上，该按钮不必是表单的一部分，因为我将在单击它时运行客户端代码。但它确实必须出现在登录按钮旁边。

谢谢。

【问题讨论】：

注意，name="submit"应该避免，直接调用会干扰表单的提交方法（如form.submit()）

标签： jquery forms append

【解决方案1】：

你可以像这样使用.after

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

或

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

【讨论】：

【解决方案2】：

你不能向输入元素添加任何东西 ..

使用.after 或.before

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

【讨论】：

我试过了，但它没有创建任何按钮。我在 Firefox 中检查 F12 ......在控制台下，我没有看到任何错误。不在脚本中
其实，没关系。我发现了错误。失踪）;它有效！

【解决方案3】：

试试这个：jsFiddle

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

【讨论】：