"It just looks ugly."

A little, yeah.

"This looks a little better:"

Insanity. That's the only explanation. The second example is worse in every way, as far as I can see.

If you're embedding the HTML inside the document at render time, why not just render it straight up without the comments? If you want the HTML fragment to appear only when JavaScript is present, include style="display: none" at first, and set display = 'block' after onload.

This could be useful as a mini-templating engine for JavaScript but the article doesn't talk about that. I'd still be concerned about the performance impact of parsing HTML every time a partial page update is applied.

What are the benefits of this compared to showing hidden divs, which can be done in one line of code with a CSS selector?

The argument is progressive enhancement: if someone doesn't have JavaScript or CSS enabled the JavaScript-enabled features would be completely hidden from view, plus you get to keep your HTML in your HTML file.

I can see how someone might turn your external style sheets off, but an inline style="display:none" attribute is not going to be ignored by any browsers. What's so inaccessible about that?

Okay I get the point for missing CSS, that makes sense... But in the case of only JS being disabled, a hidden div will remain hidden also, thus accomplishing the exact same thing in that case.

Interesting idea for keeping your HTML in one place, but the advantages are marginal over the alternatives (i.e. CSS abuse or inlining your HTML in JavaScript).

Plus, you'll have a brief flash of content before the comment markup is appended to their respective parent nodes - especially if you wait for the dom to be loaded... And searching through the entire dom tree, finding each content, and then parsing each content for delimeters etc? Seems like overkill....