innerHTML 的动态等价物？

Posted 2023-05-07

技术标签:

【中文标题】innerHTML 的动态等价物？【英文标题】：Dynamic equivalent of 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 数组中的某个位置，然后必须编写另一个函数来再次显示单选按钮。但是，如果这就是它所需要的...... 【参考方案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 和