如何获取包含后代元素实时输入值的指定元素outerHTML字符串

直接调用原生outerHTML拿不到用户实时输入内容，本质是DOM的两套值存储机制不互通：

• 写在HTML标签上的静态属性（attribute），是outerHTML序列化时会读取并输出的内容
• 用户在input框里敲的实时内容，只会存在input元素的*运行时DOM属性（property）*里，不会自动同步回静态attribute，所以序列化的时候完全感知不到这部分输入。

只需要在生成outerHTML字符串之前，手动把目标DOM范围内所有input的实时输入值，同步到对应的静态value属性上，最终输出的HTML就能完整携带所有用户输入。

改造后的可运行代码 #

$(document).on('click', 'button', function() {
  // 遍历#main容器内的所有input元素，同步实时输入值
  $('#main').find('input').each(function() {
    // 仅当input有输入内容时，才同步到静态属性，避免生成空value属性
    if (this.value) {
      this.setAttribute('value', this.value);
    }
  });
  // 同步完成后再获取outerHTML，就能拿到带输入值的完整字符串
  console.log($('#main').get(0).outerHTML);
});

补充说明 #

• 同步操作只会在触发打印/导出的瞬间执行一次，不会干扰用户的正常输入行为，也不会提前修改页面上的原有属性结构
• 如果你的页面里还有textarea、select等其他可交互的表单元素，套用相同的同步逻辑（比如把textarea的实时value写入对应静态属性、把select选中项的selected状态同步到option标签上），就能实现全表单内容的完整序列化
• 如果你希望所有input不管是否有输入都带上value属性，去掉上面代码里的if判断即可

常见坑点：不要只给input的value属性直接赋值（比如input.value = 'xxx'），这种操作只会修改运行时的property，不会写入静态attribute，一样没法被outerHTML序列化读到。必须通过setAttribute方法写入的静态属性，才会出现在最终的HTML字符串里。

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