I wonder how is it important for DOM tree element to be on the right place?
<style> should be inside <head></head>
<div> should be inside <body>
<body> should be inside <html>
For example:
$(document).ready(function () {
$("body").css("display", "none").before("<p>Loading...</p>");
});
It turns out to be that after document download we cover and put in front of it a kind of a block, that informs about page loading.
What reaction browsers can show to such construction? I checked it in Firefox 6, IE 9 – no problems!
The problem here is that if your DOM does not conform to a standard, there is no standard way defined for how the layout should be handled by the web browser.
Therefore the browsers are free to render the webpage as they wish; which makes it harder for you to design a webpage that displays consistently across allllllll web browsers.