IE testing Javascript "Browser Mode" "Document Mode" Driving me NUTZ! Is it a browser compatibility issue or what is going on

Question

Need an intervention here, as I am pretty much losing my mind on this 0_o

I am using IE 9 and am using IE's F12 developer tools, trying to test for IE8. I am performing a pretty simple task with JavaScript.

I am grabbing some inner html - using it as a sting for whatever reason.

Like this:

<div id="Some_Container_div">

    <div class="Some_Inner_Div_Class">sometext</div>
    <div class="Some_Inner_Div_Class">sometext</div>
    <div class="Some_Inner_Div_Class">sometext</div>

</div>


<script>

var Div_Contaiers_Inner_Html_As_String = document.getElementById('Some_Container_div').innerHTML;

alert(Div_Contaiers_Inner_Html_As_String);

Array_Of_Divs = Div_Contaiers_Inner_Html_As_String.split("</div>");

alert(Array_Of_Divs);

</script>

The above code properly alerts: First:

<div class="Some_Inner_Div_Class">sometext</div><div class="Some_Inner_Div_Class">sometext</div><div class="Some_Inner_Div_Class">sometext</div>

Then the second alerts the proper array:

<div class="Some_Inner_Div_Class">sometext,<div class="Some_Inner_Div_Class">sometext,<div class="Some_Inner_Div_Class">sometext,

If I now use the developer tools (f12) and switch to "Browser Mode" IE8 and I switch the "Document Mode" also to IE8 the browser now alerts :

First:

<DIV class=Some_Inner_Div_Class>sometext</DIV><DIV class=Some_Inner_Div_Class>sometext</DIV><DIV class=Some_Inner_Div_Class>sometext</DIV>

Notice the missing quotes now?
Notice the capitalization of the words 'DIV' now?

And next it alerts the same thing:

<DIV class=Some_Inner_Div_Class>sometext</DIV><DIV class=Some_Inner_Div_Class>sometext</DIV><DIV class=Some_Inner_Div_Class>sometext</DIV>

So it looks like it is not even splitting the string into an array now - not sure why, like it was not a string anymore.

If I now use the developer tools (f12) and keep "Browser Mode" IE8 and I switch the "Document Mode" also to IE9 - it works fine again....

So thanks so much for confusing me again Bill Gates 0_O

Anyway - so I looked through here for help - I see some people saying you should switch both "Browser Mode" to IE8 and "Document Mode" also to IE8 when testing with developer tools - but I do not see an explanation I understand as to why. and what is the difference if you switch just one or both.

In the mean time:

Can anyone tell me if this is going to work properly in IE8?
Why it is stripping the quotes out?
Why is it not creating the array in developer tools testing mode?

Thanks to all : )

joequincy joequincy · Accepted Answer · 2012-12-08T00:26:12

Short answer:

It's a compatibility issue. The JScript 5 engine (IE7/IE8) was severely flawed, and this is one of the things it does (stripping the "s from attributes and altering capitalization when generating an innerHTML string). As well, because innerHTML screws with capitalization, it's trying to match your .split("</div>"); against a string containing </DIV> and failing.

Try using .split(/<\/div>/i); instead. This won't solve the loss of "s from your attributes, but it's a partial fix. See this answer for a function that appears to fix missing quotes and capitalization if the quotes are necessary.

In the larger issue of how to test against older versions of IE:

In essence, the Browser Mode doesn't do anything to how Internet Explorer renders the page¹. Browser mode influences how IE acquires the page, changing the UserAgent sent to the server.

Document Mode changes which version of the Trident rendering engine, and whether the IE9 Chakra Javascript engine or the IE8/IE7 variants of the JScript engine are used.

TL;DR, for testing purposes you should change the Browser Mode to IE8, then observe whether the Document Mode defaults to IE8 Standards or Quirks. If the code is not working, toggle between the two. If the code then works, make sure you're setting an appropriate DOCTYPE for whichever mode works (Transitional for Quirks mode, Strict for Standards mode).

_{[1] Browser Mode also influences how the browser interprets conditional comments, and the default Document Mode (makes it match the Browser Mode), so changing only this is a good way of figuring out how IE8 will interpret the page... but this behavior breaks quickly if you have X-UA-Compatible Meta tags, so if you're using those, just set Document Mode to match.}

IE testing Javascript "Browser Mode" "Document Mode" Driving me NUTZ! Is it a browser compatibility issue or what is going on

2 Answers

Short answer:

In the larger issue of how to test against older versions of IE: