在 jQuery 中动态克隆 DOM 元素时，原生 的 value 属性不会自动同步用户输入内容；需手动将当前 .value 反写回 value 特性（attribute），否则克隆体只能读取初始 HTML 值或空值。
在 jquery 中动态克隆 dom 元素时，原生 `` 的 `value` 属性不会自动同步用户输入内容；需手动将当前 `.value` 反写回 `value` 特性（attribute），否则克隆体只能读取初始 html 值或空值。
当使用 $('html').clone() 或类似方式克隆包含表单控件的 DOM 时，一个常见却容易被忽视的问题是：克隆得到的是元素的静态 HTML 结构，而非运行时状态。例如，用户在 中手动修改为 "changed" 后，该元素的 DOM 属性 value（即 element.getAttribute('value')）仍为 "initial"，而其 JavaScript 属性 element.value 才反映最新输入。由于 .clone() 复制的是属性（attributes），而非属性值（properties），因此克隆结果中所有 的 value 特性均滞后于实际用户输入。
✅ 正确解决方案：实时同步 value 特性
最简洁可靠的方案是在用户每次输入时，立即将当前 element.value 写回 value 特性：
$(document).on('input', 'input', function() {
$(this).attr('value', this.value);
});
? 使用 'input' 事件（而非 'change'）可捕获即时输入（包括粘贴、拖拽、键盘输入等），确保值同步无遗漏。
随后，在按钮点击处理逻辑中执行克隆操作即可获取含最新值的副本：
$(document).on('click', '.output', function () {
const htmlCopy = $('html').clone();
// 此时所有 input 元素的 value 特性均已更新
htmlCopy.find('input').each((i, inp) => {
console.log('Cloned input value:', inp.value); // ✅ 输出最新值
console.log('Cloned input attr(value):', $(inp).attr('value')); // ✅ 同步一致
});
// 后续可序列化、提交或渲染 htmlCopy
});
⚠️ 注意事项与补充说明
- 不要混淆 attr() 与 prop()：$(el).attr('value') 操作 HTML 属性（初始值），$(el).prop('value') 操作 DOM 属性（实时值）。克隆仅复制前者，故需主动维护。
- 动态添加的 input 也适用：委托事件 $(document).on('input', 'input', ...) 天然支持未来插入的元素，无需额外绑定。
-
textarea 和 select 同理：如需支持多类表单控件，可扩展为：
$(document).on('input', 'input, textarea, select', function() { const $this = $(this); const value = this.tagName === 'SELECT' ? $this.val() : this.value; $this.attr('value', value); }); - 性能考量：该监听对现代浏览器影响极小；若页面存在海量输入框且高频触发，可考虑节流（throttle），但绝大多数场景无需优化。
✅ 总结
核心原则是：DOM 克隆不继承运行时状态，必须显式将关键 property（如 value）持久化为 attribute。通过 input 事件实时反写，即可让克隆结果准确反映用户当前输入，彻底解决“动态添加/修改后值丢失”的问题。这一模式同样适用于 checked（checkbox/radio）、selected（option）等需持久化的表单状态。
