javascript - 使用 Form 元素转换/更改 Div 元素

Question

我正在使用面板栏，因此表单标签会干扰它的打开/关闭动画

我发现表单标签正在产生问题，因此我希望当我单击提交按钮时将 div 标签转换为表单标签。

例如:

<div class="myForm">
<div id="detail">
    Name: <input type="text" name="text_name" value="Some text here to edit"/>
</div>
<div id="income">
    Income: <input type="text" name="text_income" value="your income"/>
</div>
    <input type="submit" value="Submit" />
</div>

转换为:

<form name="input" id="" action="html_form_action.php" method="post">
<div id="detail">
    Name: <input type="text" name="text_name" value="Some text here to edit"/>
</div>
<div id="income">
    Income: <input type="text" name="text_income" value="your income"/>
</div>
    <input type="submit" value="Submit" />
</form>

所以我想要的就是将类“.myForm”的 div 更改为 Form 元素 并用关闭表单标签关闭 div。

有什么办法可以做到这一点吗？

Answer 1

使用 Javascript + jQuery:

$('.myForm').children().unwrap().wrapAll("<form name='input' id='' action='html_form_action.php' method='post'></form>");

这将使用 unwrap 方法删除包装 div“.myForm”。然后使用 wrapAll 方法包装其子级。