How do I get html attribute order to be consistent when testing in Javascript.

Question

I have a component that creates a set of text like this in the innerHTML:

fourty two<br><br><input value="Select" type="button">

upon setting the innerHTML, the browser will sometimes parse this text, producing:

fourty two<br><br><input type="button" value="Select">

This behavior seems browser dependent, because I can get my tests to run in FFx, and then they will fail in safari, because of the order of the attributes.

Is there a way I can parse the HTML into some DOM-like form, and then print it out before the compare so that I can expect a consistent ordering of html attributes?

Answer 1

The attributes in HTML elements are unordered, that is: the order is irrelevant. If your tests assume a specific order then they're doing it wrong really.

Answer 2

I had to write my own canonicaization funciton for HTML for just this reason. See http://code.google.com/p/google-code-prettify/source/browse/trunk/src/prettify.js#556

Answer 3

I have a case where i am checking in xml to SVN and i want the attributes in the SAME order every time (ideally alphabetical) so that diffs are useful... as it stands now, JAXB will reorder the attributes randomly, and so the diffs generated on a changeset are useless as they hide the real changes.

anyone have any idea how to force the attributes to be alphabetized?