jQuery - 使用表单元素克隆 <div>，包括它们的值答案

【问题标题】：jQuery - Clone <div> with form elements, including their valuesjQuery - 使用表单元素克隆 <div>，包括它们的值
【发布时间】：2013-07-28 23:28:07
【问题描述】：

我有一个 Django 表单集，它有很多表单元素。我有一种创建新空表单的工作方法，但我还需要一个复制表单的解决方案。从技术上讲，所有表单都在一个 div 中，如下所示：

<form>
...
    <div class="subform">
         ...
    </div>
...
</form>

问题是，在最新的 jQuery 版本中，html 和 replaceWith 方法不处理输入值，因此它们创建了空的表单元素——这不是我需要的行为。当然，我可以实现一个算法来迭代所有元素，复制它们并设置它们的值，但如果可能的话我想避免它。

我想用复制的值替换现有表单。

【问题讨论】：

你试过clone()而不是html()/replaceWith()吗？它将保留 <input> 元素的 value 属性，甚至可以保留事件处理程序和自定义数据。
@FrédéricHamidi 我有，而且效果很好。这就是我创建新表单的方式。（当然它也有很多特定于 django 的东西）。但在这种情况下，我必须用新表单替换现有表单。
嗯，你也可以用它来复制现有的表格。 yourForm.clone(true).replaceAll(yourForm) 应该可以工作。
乍一看，它似乎工作得很好！谢谢！你会回答赏金吗？

【解决方案1】：

是的，可以使用clone() 和replaceAll() 代替html()/replaceWith()。 clone() 将保留您的 <input> 元素的 value 属性，甚至可以保留事件处理程序和自定义数据。

你可以这样写：

var theForm = $("selector-matching-your-form");
theForm.clone(true).replaceAll(theForm);

【讨论】：

【解决方案2】：

Frédéric 有一个绝妙的答案，我花了一段时间才理解它。这是一个不同的版本：

创建一个引用元素的变量。

var someElement = $("input#some-element");

克隆元素

var cloneOfElement = $someElement.clone(true);

通过使用引用原始元素的变量，使用克隆替换原始元素。

cloneOfElement.replaceAll( $someElement );

来自 replaceAll() 文档： “.replaceAll() 方法类似于 .replaceWith()，但源和目标相反。”

【讨论】：