
使用 `.html()` 复制包含 `` 的 html 会丢失用户已输入的值;正确做法是用 `.clone()` 方法深度复制 dom 元素及其当前状态(包括 value、checked、selected 等)。
在 jQuery 中,.html() 方法仅获取或设置元素的内部 HTML 字符串,它不捕获表单控件的运行时状态(如用户输入的 value、复选框的 checked 状态等)。因此,当你执行 $(".element1").html() 时,返回的是原始 HTML 源码(例如 ),而不包含用户实际输入的内容。
✅ 正确解决方案:使用 .clone()
.clone() 方法会创建所选元素的深拷贝,不仅复制结构,还保留当前的属性值、事件绑定(可选)、以及表单字段的实时状态(如 的 value、
以下是推荐的实现方式:
$("#myButton").click(function() {
// 克隆 .element1 下的所有子元素(不包含 .element1 自身),并追加到 .element2 内部
$(".element1 > *").clone().appendTo(".element2");
});? 补充说明:
- $(".element1 > *") 选取 .element1 的直接子元素(避免嵌套复制容器本身);
- .clone() 默认不复制事件处理器(安全默认),如需复制事件,可传参 .clone(true);
- 若需清空目标容器再插入,可先调用 $(".element2").empty();
- 注意:克隆后的 元素会拥有相同 name 和 id(如有),若用于表单提交,建议在克隆后手动重置 id 或添加唯一标识,避免重复 ID 违反 HTML 规范。
完整可运行示例:
我已勾选
✅ 总结:永远优先用 .clone() 而非 .html() 来复制交互式表单元素;它是语义正确、行为可靠且符合 DOM 状态管理的最佳实践。










