How does one validate html that's generated from JS running in the browser?

The page in question has very skeletal html sent over the wire to facilitate the building of a complicated UI in javascript.

I'm now encountering a strange browser compatibility issue that feels very much like I've got a markup problem somewhere on the page.

I've validated the page as it comes across the wire using the W3C tool and ensured there are no issues in that html. I've also tried validating the output of running on the browser console:

document.getElementsByTagName('html')[0].outerHTML

I find th开发者_如何学JAVAat the output of the above introduces lots of new issues, such as removing the trailing '/' in self closing tags. This added noise is distracting, but it also makes me uneasy about validating this method.

How do you validate markup that's rendered client side?

---

When elements are created on the client, they are created correctly by the browser - there really isn't anything to validate. The only time you'd need to validate any markup is if you're actually assigning outerHTML/innerHTML = some markup from the server. If that's the case, just log out the results on your server and run them through the standard HTML validators.

---

HTML documents are parsed by the browser into a DOM representation - the markup code itself isn't retained. When you create/modify elements via Javascript, they are also created via the DOM (or parsed into DOM objects, if using innerHTML/outerHTML assignment). So there isn't anything to validate, really, since your Javascript-generated page isn't stored as markup to begin with.

Retrieving HTML via innerHTML/outerHTML causes the browser to reconvert it, and browsers still generally do so with HTML syntax, not strictly XHTML syntax (e.g. regarding self-closing tags).

As far as working out the rendering issue (or maybe some messy/overlooked CSS, for example), you might consider using something like Firebug or Chrome's Developer Tools (or Firebug Lite for browsers other than Firefox and Chrome) - it lets you inspect the document structure and elements, select elements and see which CSS rules are applied to them, and visually inspect the box model. It might help you identify where your issue is.

And just in case, do you have a valid DOCTYPE declaration? Quirks mode can do strange things.

---

If you want to validate a page why not access it, view source, copy it and use validate by direct input? It takes 3 clicks more than normal validation but... The other way is to host it somewhere and validate from there.