动态增减/修改的输入框值无法引用问题求助

直接用jQuery的clone()克隆页面时，输入框的实时内容不会被保留，原因很简单：clone()默认复制的是元素的HTML属性值，而用户修改输入框后，新内容存在DOM元素的value属性（不是HTML标签里的value属性）里，两者是分离的。

解决步骤 #

在执行克隆操作前，先把所有输入框的实时值同步到它们的HTMLvalue属性上，之后再克隆就能拿到最新内容了。

修改后的完整代码 #

HTML部分（不变）

<html>
  <body>
    <input placeholder="placeholder"/>
    <input placeholder="placeholder" value="change me"/>
    <button class="output">
      do log
    </button>
  </body>
</html>

JavaScript部分

$(document).on('click', '.output', function () {
    // 同步所有输入框的实时值到HTML属性
    $('input').each((i, inp) => {
        $(inp).attr('value', inp.value);
    });
    
    const htmlCopy = $('html').clone();
    
    htmlCopy.find('input').each((i, inp) => {
        console.log(inp.value); // 现在能输出最新的输入值
    });
    
    // 后续对克隆元素的操作
})

扩展说明 #

如果页面里还有其他表单元素（比如textarea、下拉框），也可以用类似逻辑同步：

• textarea：$(textarea).text(textarea.value)
• select下拉框：$(select).find('option:selected').attr('selected', true)

这个方法对动态新增/删除的输入框同样有效，因为我们是遍历当前页面所有的对应元素，不管是初始加载的还是后续动态生成的。

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