修改子元素值后如何更新父元素的innerHTML？

我完全懂你遇到的这个困惑——明明已经修改了DOM元素的value，但打印父元素的innerHTML时却看不到任何变化，这其实是因为DOM里的属性（property）和特性（attribute）是两个完全独立的东西！

问题根源 #

当你通过refChild.value = value修改的是DOM元素的property，这是元素在内存中维护的当前值，会实时影响页面的显示效果，但浏览器不会自动把这个值同步回HTML源码对应的valueattribute上。而innerHTML是从元素的HTML特性（也就是你最初写在标签里的那些属性）生成的，所以自然看不到你修改后的value。

解决方案 #

要让innerHTML也能反映最新的value，你需要在修改value property之后，手动用setAttribute同步更新value attribute。

修改后的完整代码 #

把你循环里的修改逻辑补充一行同步代码即可：

// user saved the innerHTML of a node some time ago
let loadedHTMLData = '<input mykey type="number" step="1" value="7">';

// we have a reference innerHTML which may have updated fields
// but only holds meaningless default values
let defaultHTMLData = '<input mykey type="number" step="0.1" value="-1">';

let node = document.createElement('div');
node.innerHTML = loadedHTMLData; // loaded from somewhere

let refNode = document.createElement('div');
refNode.innerHTML = defaultHTMLData; // reference node

console.log('Before update:', refNode.innerHTML);

// update reference node values with values from the loaded html
for (let child of node.children) {
  let key = child.attributes[0].name; // some identifier
  let value = child.value;

  let refChild = refNode.querySelectorAll('[' + key + ']')[0]; // assume theres always 1 fitting element
  console.log('Changing ', key, 's value from ', refChild.value, ' to ', value);
  refChild.value = value;
  refChild.setAttribute('value', value); // 新增这行：同步更新HTML特性
}

console.log('After update: ', refNode.innerHTML);

运行结果 #

修改后再运行，就能得到你期望的输出了：

Before update: <input mykey="" type="number" step="0.1" value="-1">
Changing  mykey s value from  -1  to  7
After update:  <input mykey="" type="number" step="0.1" value="7">

额外小细节 #

表单元素的value是属性和特性分离的典型例子——浏览器这么设计是为了保留初始值的记录：你可以通过refChild.getAttribute('value')拿到最初的HTML特性值，通过refChild.value拿到当前的DOM属性值，两者可以独立存在。

备注：内容来源于stack exchange，提问作者Dominic