Does $() work differently in Internet Explorer?

Question

I am running the following JavaScript in both Firefox Developer Edition 38 and Internet Explorer 8 and 9.

console.log('+++++++++++++++++++++++++++++++');
console.log('jquery version = ' + $.fn.jquery);
var myHtmlString = "<!-- my comment -->" +
                      "<optgroup label='my label'>" +
                        "<option value='1'>option one</option>" +
                      "</optgroup>";

console.log($(myHtmlString));
console.log($(myHtmlString)[0]);
console.log($(myHtmlString)[1]);
console.log($(myHtmlString).length);

In Firefox, I get:

In IE, I get:

So, apparently in Firefox, an HTML comment is getting added in as an element of this object but in IE, it's not. Why is this behaving this way, is there a bug, or is there another way I should be creating this object?

NOTE: I tried $.parseHTML(myHtmlString) but it does the same thing.

UPDATE: This answer How does jQuery treat comment elements? provides a potential workaround.

Answer 1

So it depends on the browser you're using, but since you're passing in more than 1 simply tag, (as an example $('<div>example html creation</div>')) jQuery lets the browser handle the creation.

If the HTML is more complex than a single tag without attributes, as it is in the above example, the actual creation of the elements is handled by the browser's .innerHTML mechanism. In most cases, jQuery creates a new element and sets the innerHTML property of the element to the HTML snippet that was passed in.

jQuery documentation

Firefox for example is looking through each of your < > areas, and it finds 2. While IE doesn't care, and processes it all as 1 (hence the length 1).

Long story short, you're doing it fine. That's just internally how the browser is handling it, you don't have to worry about any of that!