使用jQuery clone()后<input>的value属性与控件实际内容不匹配如何解决

核心原因 #

你遇到的现象是HTML属性（attribute）和DOM属性（property）的差异导致的：

• 浏览器开发者工具元素面板里看到的标签上的value="xxx"属于HTML attribute，是元素初始化时的默认值，只会随attr()这类操作修改，和表单控件的实际显示、提交值没有直接关联。
• jQuery的val()方法修改的是DOM property，这是控制输入框实际展示内容、表单提交取值的变量，你调用val('')后输入框显示为空，就是因为DOM property已经被修改成功。

你调用clone()方法时，会完整复制原元素的所有HTML attribute，包括原输入框初始的value值，后续仅用val('')修改DOM property不会同步更新到HTML attribute上，自然就出现了显示内容和标签属性不一致的情况。

同步修改HTML attribute的方案 #

如果你需要让标签上的value属性和实际值保持一致，在清空值时同时调用attr()方法修改HTML attribute即可，参考代码：

// 克隆目标元素
const clonedDiv = $('.target-div').clone()
// 同时清空DOM value和HTML的value属性
clonedDiv.find('input').val('').attr('value', '')
// 插入到DOM中
$('body').append(clonedDiv)

内容的提问来源于stack exchange，提问作者Jonathan Wood