innerHTML的动态等效物是什么？

Question

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

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

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

或者

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

在现代浏览器中，innerHTML只会给出页面加载时的原始标签（如在此详细讨论的这里），它不记录用户是否选择了单选按钮。

有没有安全的方法来获取更新后的HTML？我知道有办法在JavaScript中获取单选按钮本身的状态，但我想要的是完整的更新后的HTML。

谢谢！

- AP257

---

这是一个很好的问题。据我所知，现有的功能无法实现这一点，您可能需要构建自己的函数来完成这个任务，这可能会相当繁重 - 或许更聪明的人会证明不同。 - Tatu Ulmanen

请注意：IE8实际上会显示当前选中状态。您能解释一下为什么需要这个吗？可能有其他解决方案。 - Roland Bouman

根据您提供的帖子，更新表单输入时对HTML的影响是未定义的。因此，您不能仅依靠查看HTML来计算。我们真正需要做的是以某种方式将当前感兴趣的DOM对象转换为HTML。我无法想到一种简单的方法来实现这个要求。 - Johrn

如果您解释一下为什么需要这样做，我们可能会找到一个好的解决方法，而不涉及编写自己的HTML生成函数。 - Sasha Chedygov

感谢所有的回答。我正在编写一份测验，它会逐个显示问题，但我想记录用户每个问题的答案，以便最后可以一起显示所有问题和答案。<br/>换句话说，我想在某个地方保存每个问题的innerHTML及其答案状态，以便轻松重新显示它们。最好直接使用HTML，而不是将答案存储在Javascript数组中，然后必须编写另一个函数再次显示单选按钮。但是，如果需要的话... - AP257

Answer 1

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

例如，以下 HTML 代码：

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

将元素的defaultChecked属性设置为true，即使组中的其他单选按钮被选中，它也会保持不变。

更改defaultChecked属性似乎会更新outerHTML。

因此，如果您循环遍历所有表单元素，将当前值/选中状态/选择状态复制到defaultValue/defaultChecked/defaultSelected属性中，那么您可能可以获得所需的更新后的outerHTML。

- brianary

Answer 2

你想在jQuery中 :选中 它

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

- helloandre

Answer 3

据我所知，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);

- twernt

---

我知道在Javascript中有获取单选按钮状态的方法，但我想要的是完整的、更新后的HTML。 - Yaakov Shoham

将此作为已接受的答案，因为它似乎是我需要做的最佳方式。谢谢。 - AP257

Answer 4

你可能需要遍历DOM树并自己生成HTML

- singpolyma

Answer 5

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

- Valentin Rocher

---

虽然这个信息很有用，但并不能解决楼主的问题。我不会给负分，因为理解这个区别很重要。 - Sasha Chedygov

DOM 树实际上并没有改变，只是与特定节点相关的状态发生了改变。 - Ms2ger