The dynamic equivalent of innerHTML?

Question

I want to get an innerHTML element that can be modified by the user.

So, for example, I want to know the state of the switch:

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

or

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

In modern browsers, innerHTML simply gives the source tag when loading the page ( discussed in detail here ): it doesn Do not register whether the switch was turned on by the user or not.

Is there a safe way to get updated HTML? I know that there are ways to get the state of the switch itself in Javascript, but I would like to get the full, updated HTML.

Thanks!

Answer 1

As far as I know, the actual order of properties of the HTML element is open to interpretation by the browser, so there is no reliable way to determine if you are 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 the properties and values ​​of an element using the for ... in operator:

 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 that you can compare the properties found in the element with a subset of the properties that you really need (specific to that particular tag or the larger "html" property universe) to get the "html state" of the element and be able to restore it or string representation.

 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 2

As already mentioned, HTML does not save the current state of form elements. HTML defines the initial or standard state of form elements. DOM saves the state of a volatile form.

For example, this HTML

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

sets the element's defaultChecked property to true, which remains true even if another switch in the group has been checked.

Changing the defaultChecked property updates outerHTML.

So, if you go through all the elements of the form by copying the current value / verifiability / selection to the defaultValue / defaultChecked / defaultSelected properties, you can get the updated outerHTML that you are looking for.

Answer 3

you want : marked in jQuery and

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

Answer 4

You will probably have to walk through the DOM tree and generate the HTML code yourself.

Answer 5

The fact is that HTML is not really “updated”. The DOM tree is what you can see, but the HTML itself remains unchanged (and therefore innerHTML retains the same value)