5

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 completely gut the HTML contents and use my own. Again, this works fine on other browsers.

Other notes:

  • The CMS is using the prototype.js library (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.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • The CMS scripts use prototype.js to dynamically add two divs full of content at page load
atwixtor
  • 795
  • 10
  • 26
  • Is this true in my situation? http://stackoverflow.com/a/255180/435596 Will I never be able to change the contents of `HEAD` or `HTML` in IE? – atwixtor Dec 09 '11 at 16:10
  • 1
    Yes, you've found the correct answer; `innerHTML` is read-only even for `` element in IE up to version 9. Anyway, I think it'll be better to replace `document.body.innerHTML` and `document.title` - these include all visible content and you won't experience any problems, without the need for rewriting whole `` content. – duri Dec 09 '11 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 comment as an answer? How should this be answered? – atwixtor Dec 09 '11 at 16:44

2 Answers2

2
document.open("text/html", "replace");
document.write("<head></head><body>Testing</body>");
document.close();
Serg
  • 6,742
  • 4
  • 36
  • 54
  • This method has one additional advantage over `document.documentElement.innerHTML` - it triggers all events like `body.onload` once again. Because of that, it's a better choice on newer browsers too. – kriskodzi Mar 04 '20 at 09:00
  • doing this causes flicker – france1 Oct 21 '22 at 07:53
1

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 comment), 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!

atwixtor
  • 795
  • 10
  • 26