
使用 `.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 提供的语义正确、兼容性强的标准方案。










