如何使用 jQuery 正确克隆表单输入元素并保留其当前值

使用 `.html()` 复制表单元素会丢失用户输入的值，正确做法是用 `.clone(true)` 深度克隆——它能完整复制元素结构、属性、事件（可选）及实时 value/checked 等状态。

在 jQuery 中，.html() 方法仅获取或设置元素的 纯 HTML 字符串，它不包含运行时状态（如 的 value 属性值、 的 checked 状态等）。因此，当用户已在输入框中键入内容后调用 $(“.element1”).html()，返回的字符串仍为 ，原始 value 并未被序列化进去，导致粘贴到 .element2 后显示为空。

✅ 正确解决方案：使用 .clone() 方法，并传入 true 参数启用 深克隆（deep clone）：

$("#myButton").click(function() {// 克隆 .element1 下所有子元素（含 input），保留当前 value、selection、checked 等状态   $(".element1> *").clone(true).appendTo(".element2"); });

? 补充说明：.clone() 默认为浅克隆（false），只复制 DOM 结构和属性；.clone(true) 才会复制绑定的事件处理器（需 jQuery 1.2+）和表单控件的运行时值（如 input.value、textarea.value、select.selectedIndex、checkbox.checked）；若仅需复制值而无需事件，可省略参数（.clone()），但为确保兼容性与完整性，推荐显式写 .clone(true)。

? 注意事项：

• 不要对已存在 id 属性的元素直接克隆并插入同一文档，否则会导致重复 ID（违反 HTML 规范）；建议克隆前移除或重置 id：

  $(".element1> *").clone(true).removeAttr("id").appendTo(".element2");

• 若需克隆后立即聚焦新输入框，可链式调用：

  $(".element1> *").clone(true)   .removeAttr("id")   .appendTo(".element2")   .find("input[type='text']:last").focus();

✅ 总结：替换 .html().html() 这类“字符串级复制”，改用 .clone(true).appendTo() 是保留表单状态最可靠、语义最清晰的方式——它操作的是 DOM 节点本身，而非静态 HTML 字符串。