将表单标签添加到现有的HTML标签

Question

我试图在现有的HTML标签周围添加一个表单。

这不起作用是因为它会自动在表单打开标签之后放置一个表单关闭标签。

<div id="logon-form"></div>
    <input type="text" id="user-name"/>
    <input type="password" id="password"/>
<div id="close-form"></div>

$("#logon-form").append('<form id="LogOnForm" action="/Account/LogonDialog" method="POST" enctype="application/x-www-form-urlencoded">');
$("#close-form").append('</form>');

有什么想法吗？使用单个登录表单div也不起作用。

如果你想知道为什么我要这样做，那是为了打败许多浏览器中不遵守autosave=off属性的自动保存功能。

- Fred Chateau

---

你这样做有什么特别的原因吗？ - Jorge Y. C. Rodriguez

查看.wrap函数。 - jalynn2

不知道wrap呢。我会试一试。 - Fred Chateau

我这样做的原因是因为我不想让浏览器知道这是一个表单。否则，大多数浏览器都会保存密码，无论是否将自动保存属性设置为关闭。 我想我可以使用jQuery POST来发送数据，但是服务器会返回一个授权cookie和重定向到另一页，所以提交表单似乎是更好的处理方式。 - Fred Chateau

Answer 1

您不能将DOM中元素的插入视为在文本编辑器中编写HTML的方式。

DOM仅处理完整且有效的元素。事实上，jQuery的工作方式是，在第一个append中关闭表单，即使没有关闭标签也是如此。

例如，$('<div>')将创建一个有效的闭合元素。

针对您的情况，请使用wrap()。使用append的逻辑也不起作用，因为它会将表单插入选择器的末尾。而将结束标记放在另一个div中也是无效的。

您还可以将表单放在#closed-form之后，然后将所示元素附加到表单。所示的HTML结构似乎非常奇怪。

参考：wrap() API文档。

- charlietfl

Answer 2

由于您没有包含元素，因此可以使用.wrapAll()和.add()来实现您想要的效果：

$("#logon-form").add('input').add('#close-form').wrapAll('<form id="LogOnForm" action="/Account/LogonDialog" method="POST" enctype="application/x-www-form-urlencoded" />');

jsFiddle示例

- j08691

Answer 3

<div id="logon-form">
    <input type="text" id="user-name"/>
    <input type="password" id="password"/>
</div>

$("#logon-form").wrap('<form id="LogOnForm" action="/Account/LogonDialog" method="POST" enctype="application/x-www-form-urlencoded">');

谢谢。这很有效。

给了我这个：

<form id="LogOnForm" action="/Account/LogonDialog" method="POST" enctype="application/x-www-form-urlencoded">
    <div id="logon-form">
        <input type="text" id="user-name"/>
        <input type="password" id="password"/>
    </div>
</form>

- Fred Chateau