innerHTML 的动态等价物？答案

【问题标题】：Dynamic equivalent of innerHTML?innerHTML 的动态等价物？
【发布时间】：2011-01-05 06:12:09
【问题描述】：

我想获取可能已被用户更改的元素的 innerHTML。

例如，我想知道单选按钮的状态：

<input type="radio" name="Q_209" value="A" checked>

或

<input type="radio" name="Q_209" value="A">

在现代浏览器中，innerHTML 只是在页面加载时给出原始标签（如discussed at length here）：它不记录单选按钮是否已被用户选中。

是否有任何安全的方法来获取更新的 HTML？我知道有一些方法可以在 Javascript 中获取单选按钮本身的状态，但我想要的是完整的、更新的 HTML。

谢谢！

【问题讨论】：

这是个好问题。据我所知，现有功能无法做到这一点，您可能必须为可能非常繁重的功能构建自己的功能 - 也许更聪明的人会证明并非如此。
没有答案，仅供参考：IE8 实际上确实显示了当前的 CHECKED 状态。你能解释一下为什么需要这个吗？可能还有另一种解决方案。
因此，根据您链接的帖子，更新表单输入时对 HTML 的影响似乎是未定义的。因此，您不能指望只查看 HTML。我们真正需要做的是以某种方式将当前感兴趣的 DOM 对象转换为 HTML。我想不出一个简单的方法。
如果您解释为什么需要这样做，我们可能会找到一个很好的解决方法，而无需编写您自己的 HTML 生成函数。
感谢您的所有回答。原因是我正在写一个测验；它一次显示一个问题，但我想记录用户为每个问题给出的答案，以便我可以显示他们最后一起给出的所有问题和答案。
换句话说，我想将每个问题的innerHTML与答案状态一起保存在某个地方，以便于重新显示。最好直接使用 HTML，而不是将答案存储在 Javascript 数组中的某个位置，然后必须编写另一个函数来再次显示单选按钮。但是，如果这就是它所需要的......

标签： javascript html innerhtml

【解决方案1】：

如前所述，HTML 不存储表单元素的当前状态。 HTML 定义表单元素的初始或默认状态。 DOM 存储 volatile 表单状态。

例如，这个 HTML

<input type="radio" name="Q_209" value="A" checked>

会将元素的 defaultChecked 属性设置为 true，即使选中了组中的其他单选按钮，该属性也会持续存在。

更改 defaultChecked 属性确实会更新 outerHTML。

因此，如果您遍历所有表单元素，将当前值/已检查/已选择属性复制到 defaultValue/defaultChecked/defaultSelected 属性，则您可能能够获得您正在寻找的更新后的 outerHTML。

【讨论】：

【解决方案2】：

据我所知，HTML 元素属性的实际顺序可以由浏览器解释，因此没有可靠的方法来确定您是在处理<input type="radio" name="Q_209" value="A" checked> 还是<input checked="true" name="Q_209" value="A" type="radio">

但是，您可以使用for ... in 语句获取元素的所有属性和值：

var foo = document.getElementById('form_id')['Q_209'];
var foo_properties = [];

for (var prop in foo) {
   // do something with prop and foo[prop];      
}

这意味着您可以将在元素中找到的属性与您实际关心的属性子集（特定于此特定标记或更大范围的“html”属性）进行比较，以获取元素的“html 状态”并且能够重建它，或者它的字符串表示。

var input_foo = document.getElementById('form_id')['Q_209'];
var awesome_properties = {'type':'','name':'','value':'','checked':''};
var tag = '<input ';
var properties = '';

for (var prop in foo) {
   if (prop in awesome_properties) {
      properties += ' '+prop+'="'+foo[prop]+'"';
   }
}

tag += properties;
tag += '>';

window.alert(tag);

【讨论】：

“我知道有办法在 Javascript 中获取单选按钮本身的状态，但我想要的是完整的、更新的 HTML。”
将此作为公认的答案，因为这似乎是满足我需要的最佳方式。谢谢。

【解决方案3】：

你想要 jQuery 中的 :checked 和

$('input[type=radio]:checked').html()

【讨论】：

【解决方案4】：

您可能必须自己遍历 DOM 树并生成 HTML

【讨论】：

【解决方案5】：

事实上，HTML 并没有真正“更新”。 DOM 树是，这就是您所看到的，但 HTML 本身保持不变（这就是 innerHTML 保持相同值的原因）

【讨论】：

知道有用，但不是解决 OP 问题的方法。不过，我不会 -1，因为了解差异很重要。
DOM 树也没有真正改变，只是与特定节点相关的状态。