This may be difficult to understand unless you are familiar with the design mode feature built into Internet Explorer 5.5+. I used this feature to develop a browser-based WYSIWYG HTML editor for offline use, but I have run into a serious problem that I can't solve.

innerHTML and outerHTML access the <body> section of the web page under construction, but I was able to hack together some javascript to access the <head> section for the user to insert CSS and scripts from popup form-based code generators. The problem is I can only access the <head> section twice. When a third insertion of script or CSS is attempted, it is placed in the <body> section. Amazingly, this still works for IE, but it's bad coding and I'm sure it doesn't work in other browsers.

Here is the first two insertions that work:

function generatecss(){
var html = opener.iView.document.body.outerHTML;
var html_txt = "<html>" + "<head>" + "<style>" + '<!--a:hover{'+thesheet+'}-->' + "</style>\n";

(iView is an iframe used as an editing window for the page under construction, 'the sheet' is the form output for CSS hover links. Note that I ended the insertion at </style> without closing the <head> tag.)

function metaTag(form){
var html = opener.iView.document.outerHTML;
var html_txt = "<head>" + txt + "</head>" + "<body>" + "Page Content Begins Here" + "</body>" + "</html>\n";

(txt is the form output for meta tags. Note that I had to add body text and close the <body> and <html> tags. Otherwise, the iView focus remains in the (invisible) head section and no content can be added to the body section.)

After hover link properties and meta tags are added, scripts and CSS that are directed to the head section in the same way end up in the body section instead. Any ideas about how I could change the functions so that any number of CSS and script insertions could be made to the head section as the page is being designed? I have code generators for rollover buttons, popup windows etc. that require data in the head.