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属性的浏览器中打败自动保存。

Answer 1

由于您没有一个包含元素，因此您可以.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 example

Answer 2

您无法在DOM中插入元素，就像在文本编辑器中编写html一样。

DOM仅处理完整有效的元素。事实上，jQuery的工作方式是在第一个附加中关闭表单，而不管没有结束标记

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

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

您还可以在#closed-form之后添加表单，然后将显示的元素附加到表单中。显示的html结构从

开始看起来很奇怪

参考： wrap() API docs

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>

将表单标记附加到现有HTML标记

3 个答案: