Javascript 使用Form元素转换/更改Div元素

我使用的是panelbar，因此表单标签干扰了它的打开/关闭动画

我发现表单标记正在创建问题，所以我希望在单击提交按钮时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

---

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

使用Javascript+jQuery：

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

$（'.myForm'）.children（）.unwrap（）.wrapAll（“”）；

---

这将使用

unwrap

方法删除包装div“.myForm”。然后用

wrapAll

方法包装它的子项。

使用Javascript+jQuery：

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

$（'.myForm'）.children（）.unwrap（）.wrapAll（“”）；

---

这将使用

unwrap

方法删除包装div“.myForm”。然后用

wrapAll

方法包装它的子项。

如果你喜欢html5，你可以查看html5的“表单属性”，它允许你在任何你喜欢的地方使用表单元素，你不需要在表单标签中包装内容

看看这个

<form name="input" id="myform" action="html_form_action.php" method="post"></form>

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

姓名：
收入：

如果您确实喜欢html5，您可以查看html5的“表单属性”，它允许您在任何地方使用表单元素，而不需要将内容包装在表单标记中

看看这个

<form name="input" id="myform" action="html_form_action.php" method="post"></form>

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

姓名：
收入：

您只需使用Jquery-

$(document).ready(function(){    
   $('form').html($('.myForm').html());
});

但是如果您想这样做，这是不正确的，因为您使用了某个元素的assign

id

。因此，在将整个HTML附加到

之后，您应该删除

.myForm

对于在将

innerhtml

附加到表单中后使用class.myForm删除div

，只需使用
.remove

 $(document).ready(function(){    
       $('form').html($('.myForm').html());
       $('.myForm').remove();
    });

您只需使用Jquery-

$(document).ready(function(){    
   $('form').html($('.myForm').html());
});

但是如果您想这样做，这是不正确的，因为您使用了某个元素的assign
id
。因此，在将整个HTML附加到
之后，您应该删除
.myForm


对于在将
innerhtml
附加到表单中后使用class.myForm

删除div

，只需使用
.remove

 $(document).ready(function(){    
       $('form').html($('.myForm').html());
       $('.myForm').remove();
    });

u可以在div之前添加表单元素……u可以在div之前添加表单元素……不确定为什么会被否决。这正是OP想要的。竞争对手回答者？正是我想要的不确定为什么这被否决了。这正是OP想要的。对手的回答者？正是我要找的