Dynamic equivalent of innerHTML?

Question

Hi

I want to get the innerHTML of an element that may have been changed by the user.

So, for example, I want to know the state of a radio button:

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

or

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

In modern browsers, innerHTML just gives the original tag when the page was loaded (as discussed at length here): it doesn't record whether the radio button has been checked by the user or not.

Is there any safe way to get the updated HTML? I know that there are ways to get the state of the radio button itself in Javascript, but what I would like is the full, updated HTML.

Thanks!

Answer 1

you want the :checked in jQuery and

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

Answer 2

As far as I know, the actual order of an HTML element's properties is open to interpretation by the browser, so there's no reliable way to determine if you're dealing with <input type="radio" name="Q_209" value="A" checked> or <input checked="true" name="Q_209" value="A" type="radio">

But, you can get all of the properties and values of an element with for ... in statement:

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

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

This means you could potentially compare the properties found in the element against a subset of properties you actually care about (specific to this particular tag or a larger universe of "html" properties) to get the "html state" of the element and be able to reconstruct it, or a string representation of it.

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 3

You probably have to walk the DOM tree and generate the HTML yourself

Answer 4

The fact is that the HTML is not really "updated". The DOM tree is, and that's what you can see, but the HTML per se stays the same (and that's why innerHTML keeps the same value)

Answer 5

As has been mentioned, the HTML doesn't store the current state of form elements. HTML defines the initial or default state of form elements. The DOM stores the volatile form state.

For example, this HTML

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

would set the defaultChecked property of the element to true, which would persist even if a different radio button in the group were checked.

Changing the defaultChecked property does appear to update the outerHTML.

So, if you loop through all of the form elements copying the current value/checkedness/selectedness to the defaultValue/defaultChecked/defaultSelected properties, you may then be able to get the updated outerHTML you are looking for.