克隆 <form></form> 标记并将其包装在现有内容周围？答案

【问题标题】：Clone a <form></form> tag and wrap it around existing content?克隆 <form></form> 标记并将其包装在现有内容周围？
【发布时间】：2011-12-31 17:21:44
【问题描述】：

所以有这样一个现有的表单标签：

<form id="vCSS_mainform" onsubmit="javascript:return QtyEnabledAddToCart_SuppressFormIE();" action="/ProductDetails.asp?ProductCode=40124" name="MainForm" method="post">Bunch of Content</form>

这个表单标签里面有一堆内容。我只需要获取它的元素，克隆它，然后将它包裹在页面上的另一个 TABLE 元素周围。

我不想克隆表单标签中的任何内容。这可能吗？

我不能只做 $("p").wrapAll("");因为该表单动作包含变化的动态内容。所以我需要在用户所在的任何页面上找到表单标签并克隆那个确切的标签。

【问题讨论】：

所以你想要这部分：
[ignoreThisStuff]
?
确实，我只需要将
包裹在我的新内容周围
附带说明，javascript: 不是 onsubmit 所必需的，因为它只能运行 Javascript
Unwrap a form tag的可能重复

标签： jquery html append clone

【解决方案1】：

var $clone = $('#vCSS_mainform').clone().empty().attr('id', 'newId');
$('#vCSS_mainform').remove(); // only if you don't need it anymore.
$('#yourTable').wrap($clone);

注意：如果你删除了原来的表单，你不需要为克隆设置一个新的id（不需要.attr('id', 'newId')）

【讨论】：

赞成，对 id 的伟大呼吁。这个的 1 行版本（不删除旧形式）是：$("yourTable").wrap($("#vCSS_mainform").clone().empty().attr('id', 'newid'));

【解决方案2】：

这比较容易实现，真正要做的就是使用.clone()、.append()和.empty()：

$('#vCSS_mainform').clone().appendTo($('body')).empty();

JS Fiddle demo.

当然，请记住，重复的 ids 是无效的 HTML。

编辑以完成答案，包装您可以使用的#accBox：

$('#accBox').wrap($('#vCSS_mainform').clone().appendTo($('body')).empty());

JS Fiddle demo.

参考资料：

【讨论】：

这给了我在 Firebug 中的这个 HTML 结构：

Accessories

标签需要环绕

注意：你可以直接.appendTo('body')。

.appendTo() 不需要，因为.wrap() 会将空的克隆元素添加到页面上。

【解决方案3】：

$("#accBox").wrap($('#vCSS_mainform').clone().empty());

Fiddle demo

【讨论】：

【解决方案4】：

试试这样的。

function strip(htmlfullstring)
{
   var tmp = document.createElement("formid");
   tmp.innerHTML = html;
   return <form> + tmp.textContent||tmp.innerText+</form>;
}

如果我理解您的要求。

【讨论】：

Accessories