The following works flawlessly (as far as I can tell) in all other browsers:
document.documentElement.innerHTML = "<head></head><body>Testing</body>";
But chokes in IE (I tested IE9), with a console error:
SCRIPT600: Invalid target element for this operation.
...referencing the first character of the line of code above.
Why won't this work in IE, but will work in all other browsers? I read somewhere that innerHTML has issues replacing 'TBODY' elements, but I tested this line of code after removing all TBODY children and the same error occurred.
I know this sounds like bad-news-code, but it is the only option I have left with the very limited and simplistic CMS website we are being forced to use. I'm only thankful that the CMS allows scripts to be executed.
In essence, I need to be able to pletely gut the HTML contents and use my own. Again, this works fine on other browsers.
Other notes:
- The CMS is using the
prototype.jslibrary (it's already loaded before I run this code) - The Doctype is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd"> - The CMS scripts use
prototype.jsto dynamically add twodivs full of content at page load
The following works flawlessly (as far as I can tell) in all other browsers:
document.documentElement.innerHTML = "<head></head><body>Testing</body>";
But chokes in IE (I tested IE9), with a console error:
SCRIPT600: Invalid target element for this operation.
...referencing the first character of the line of code above.
Why won't this work in IE, but will work in all other browsers? I read somewhere that innerHTML has issues replacing 'TBODY' elements, but I tested this line of code after removing all TBODY children and the same error occurred.
I know this sounds like bad-news-code, but it is the only option I have left with the very limited and simplistic CMS website we are being forced to use. I'm only thankful that the CMS allows scripts to be executed.
In essence, I need to be able to pletely gut the HTML contents and use my own. Again, this works fine on other browsers.
Other notes:
- The CMS is using the
prototype.jslibrary (it's already loaded before I run this code) - The Doctype is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd"> - The CMS scripts use
prototype.jsto dynamically add twodivs full of content at page load
-
Is this true in my situation? stackoverflow./a/255180/435596 Will I never be able to change the contents of
HEADorHTMLin IE? – atwixtor Commented Dec 9, 2011 at 16:10 -
1
Yes, you've found the correct answer;
innerHTMLis read-only even for<html>element in IE up to version 9. Anyway, I think it'll be better to replacedocument.body.innerHTMLanddocument.title- these include all visible content and you won't experience any problems, without the need for rewriting whole<head>content. – duri Commented Dec 9, 2011 at 16:36 - Thanks for confirming. I am using the BODY now, however my external links are not loading in the head and are causing problems, and the external resources the CMS is loading in the HEAD are also messing things up. Can I accept your ment as an answer? How should this be answered? – atwixtor Commented Dec 9, 2011 at 16:44
2 Answers
Reset to default 2document.open("text/html", "replace");
document.write("<head></head><body>Testing</body>");
document.close();
As both @duri and I confirmed, the documentElement (<html>) object along with a handful of other certain HTML elements are read-only in Internet Explorer (see link in first ment), and therefore replacing the documentElement in a cross-browser fashion is not possible.
Using Javascript to strip all existing link and script tags from the head, then to set the body attributes to match the replacement content, then to replacing the innerHTML of the body, and finally dynamically adding my own script, meta, and css tags as children of the head, achieves nearly the same thing.
Thanks to @duri for the workaround tip!