Why does outerHTML bring back <!-​- --> comments?

html, javascript, jquery, outerhtml

Solution

Comments in HTML are surprisingly, in fact, part of the DOM! If you look in this screen shot here:

You'll see the google chrome web inspector renders it as part of the DOM (notice how the bottom bar shows it as a child of `div#box1.active` as well.)

For more concrete documentation, if you look at the possible `Node.nodeType`s for DOM nodes on MDN, you'll see that the `COMMENT_NODE` is one of the valid types.

COMMENT_NODE 8

W3 also defines the Comment interface for the DOM:

This interface inherits from CharacterData and represents the content of a comment, i.e., all the characters between the starting '<!--' and ending '-->'. Note that this is the definition of a comment in XML, and, in practice, HTML, although some HTML tools may implement the full SGML comment structure.

Problem

I have a jsfiddle here - http://jsfiddle.net/stevea/QpNbu/3/ - that collects the `outerHTML` for all elements that have `class='active'`. What amazes me is that even if I comment out some of the HTML, as in: ``` <!-- <div>'Some inner text'</div> --> ``` `outerHTML` still brings it back! This can't still be in the DOM so I'm wondering where `outerHTML` is looking. Thanks for any insight.

Original source