I have observed how firefox can move text and element nodes, listed before the BODY element in a HTML document, to become direct children of the BODY element.
I’m using xulrunner 2.0.1 (Firefox 4.0), Although I have observed IE also moving text, but not elements.
Here are some examples of FF doing this:
Example HTML Document 1 (text nodes and title element moved inside body):
"<html>abc<title>def</title>hij<body>inn<span>e</span>r</body>klm</html>"
Querying nsIDOMNSHTMLElement.innerHTML on the Body element using gives:
"abc<title>def</title>hijinn<span>e</span>rklm"
Iterating through Body child elements gives:
Text : "abc"
Element : "def"
Text : "hijinn"
Element : "e"
Text : "rklm"
Example HTML Document 2 (text node moved inside body but title isn’t):
"<html><title>def</title>hij<body>inn<span>e</span>r</body>klm</html>"
Querying nsIDOMNSHTMLElement.innerHTML on the Body element using gives:
"hijinn<span>e</span>rklm"
Iterating through Body child elements gives:
Text : "hijinn"
Elemnt : "e"
Text : "rklm"
My question is why is this happening? I would have expected innerHTML just to display what between the two body tags?
The basic answer is “because the HTML5 parsing algorithm says so”. To be more specific, only certain tags are allowed outside of
<body>, and everything else gets put inside<body>even though it wasn’t there in the original data stream.