17370845950

使用 `.html()` 复制包含 `` 的 html 会丢失用户已输入的值；正确做法是用 `.clone()` 方法深度复制 dom 元素及其当前状态（包括 value、checked、selected 等）。

在 jQuery 中，.html() 方法仅获取或设置元素的内部 HTML 字符串，它不捕获表单控件的运行时状态（如用户输入的 value、复选框的 checked 状态等）。因此，当你执行 $(".element1").html() 时，返回的是原始 HTML 源码（例如 ），而不包含用户实际输入的内容。

✅ 正确解决方案：使用 .clone()
.clone() 方法会创建所选元素的深拷贝，不仅复制结构，还保留当前的属性值、事件绑定（可选）、以及表单字段的实时状态（如 的 value、 的内容、<select> 的选中项等）。</select>

以下是推荐的实现方式：

$("#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 状态管理的最佳实践。