Drawing page / footer header using javascript and document.write

Question

Our scattered corporate website uses javascript to draw a header / footer on each page using document.write. This allows us to very easily maintain the "skin" of our site from one place. This approach has worked well for several years.

Recently, however, we have encountered great difficulties with IE. The problem seems to be related to the fact that the javascript header opens a tag that is closed by the script footer. Headers and footers are used to “wrap” the body in a series of divs that give the right skin.

At the same time, there are a lot of manipulations with domancy in the body of the page. IE now complains loudly and often that we try to change dom elements before they are closed, for example:

Webpage Error Details

User Agent: Mozilla / 4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident / 4.0; .NET CLR 2.0.50727) Signature: Tue, 3 Jan 2012 22:20:28 UTC

Message: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917) Line: 0 Char: 0 Code: 0 URI: http://dev.site.com/business_portal_test.jsp 

Some questions:

• Is using javascript to “wrap” the main content an additional sensible approach?
• Can anyone point out any high quality high traffic sites that use this technique?
• Does this technique have a name?

Answer 1

The main problem with this approach is that it makes the entire layout of your site dependent on javascript, which is completely contrary to accepted best practices. You can easily achieve the same level of maintainability using the server-side or the concept of master pages. Unless there is a specific reason for this, JS should not be used to layout or skin your site.