17370845950

使用 `.html()` 无法保留 input 的当前输入值，应改用 `.clone()` 方法深度复制 dom 元素及其动态状态（包括用户输入值、选中状态等）。

在 jQuery 中，.html() 方法仅获取或设置元素的内联 HTML 字符串，它读取的是原始 HTML 源码（即 outerHTML 中的初始属性），不会包含运行时动态变更的属性（例如 的 value、checked、selected 等）。因此，即使用户已在输入框中键入内容，.html() 返回的仍是 ，丢失了实际的 value 值。

正确做法是使用 jQuery 的 .clone() 方法——它会创建一个深拷贝的 DOM 节点副本，不仅复制结构和属性，还保留用户交互产生的状态（如 input.value、复选框勾选状态、下拉菜单选中项等）。

✅ 推荐写法（简洁可靠）：

$("#myButton").click(function() {
    $(".element1 > *").clone().appendTo(".element2");
});

⚠️ 注意事项：

• .clone() 默认不绑定原元素的事件监听器（除非传入 true 参数：.clone(true)），若需复制事件行为，请谨慎使用；
• 若 .element1 内含多个子元素，"> *" 确保只克隆直接子节点；如需递归克隆全部后代，可直接用 ".element1 *"（但通常推荐显式限定层级）；
• 克隆后插入前，建议清空目标容器（如 $(".element2").empty()）避免重复叠加，尤其在多次点击场景中；
• 原生 的 value 属性（property）与 value 特性（attribute）不同：.val() 读写的是 property（反映实时值），而 .attr('value') 读取的是初始 attribute（静态定义）——.clone() 复制的是 property 状态，因此能准确还原用户输入。

总结：当需要迁移或复用用户已填写/操作过的表单控件时，务必使用 .clone() 替代 .html()，这是 jQuery 提供的语义正确、兼容性强的标准方案。