Question

我想获取可能已被用户更改的元素的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。

谢谢！

Answer 1

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

例如，这个HTML

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

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

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

因此，如果循环遍历将当前值/ checkedness / selectedness复制到defaultValue / defaultChecked / defaultSelected属性的所有表单元素，则可以获得正在查找的更新的outerHTML。

Answer 2

你想要jQuery中的:checked和

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

Answer 3

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

但是，您可以使用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);

Answer 4

您可能需要遍历DOM树并自行生成HTML

Answer 5

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

动态相当于innerHTML？

5 个答案: