Develop Reference

Does $() work differently in Internet Explorer?

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.

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!

Old JavaScript Function Crashes Browser

I'm integrating a mootools script onto a page which has very old JavaScript functions which run a navigation vertical menu. This old script will be hard to change now.
The line breaking is:
function stgobj(id) {
with(document) return nIE && nVER < 5 ? all[id] : nNN4 ? layers[id] : getElementById(id);
}
Not sure exactly what's it's purpose, but it looks like it's rendering some elements. If commented the menu will disappear.
FF, Chrome, IE(doesn't crash, but menu does not render)
Any quick patch to resolve the browsers crashing?

Looks like its purpose is to return the element corresponding to the given ID. The code simply uses some different methods based on the browser - document.all for IE5 and earlier, and document.layers for Netscape 4. Unless you need to support those ancient browsers, you could alter the function to return just document.getElementById(id). Or better yet, ditch this function altogether and call document.getElementById directly.
However, if it's crashing modern browsers like Firefox and Chrome, then you should also look at the browser detection logic (the code that populates the nIE, nVER and nNN4 variables), otherwise it might just end up crashing elsewhere.

It's a "compatibility" function for document.getElementById. I think you should be able to equal it:
stgobj = document.getElementById.bind(document);

Javascript with Firefox innerText issue [duplicate]

This question already has answers here:
'innerText' works in IE, but not in Firefox
(15 answers)
Closed 7 years ago.
function OpenWindow(anchor) {
var toUsername = anchor.innerText;
window.open("ChatWindow.aspx?username=" + toUsername,'_blank', "width=340,height=200");
}
this function opens up a page with parameter as undefined in firefox where as in google chrome I get proper value.
Firefox url:
http://localhost:9452/ChatWindow.aspx?username=undefined
What is the solution for this issue?

While innerText is non-standard, it significantly differs from textContent, because first one is doing pretty printing (for example, <br/> are converted to new lines), while second one - is not.
So, while common wisdom is to use:
var toUsername = anchor.innerText || anchor.textContent;
or some kind of wrapper, it can probably be smarter to just use jQuery's .text or its analog from other library you are using.

try to change anchor.innerText with:
anchor.textContent
this hopefully works in all browsers.
also see here: 'innerText' works in IE, but not in Firefox
P.S. I really reccomend using JQuery to avoid these kind of issues and to be sure to always write fully cross-browser javascript.

innerText is a Microsoft invention whereas textContent is a W3C standard.
function OpenWindow(anchor) {
var toUsername = anchor.textContent || anchor.innerText || '';
window.open("ChatWindow.aspx?username=" + toUsername,'_blank', "width=340,height=200");
}
This should work. MooTools or some other JavaScript framework should be able to help with cross-browser inconsistencies.

use textContent for innerText.
example
<script>
function change()
{
document.getElementById("label").textContent="Hello";
}
</script>
it will work on ff. and chrome too. but not work on IE.

I was getting the same problem because Firefox does not support the innerText property, instead, it supports the textContent property. so check for the browser’s feature support to use the correct property accordingly.
if(document.all){
document.getElementById('element').innerText = "myText";
} else{
document.getElementById('element').textContent = "myText";
}
or it's better to use Jquery to resolve cross browser issues.
Usage:
$('element').text("myText");

Does IE7 not fully support javascript's insertBefore method?

I have the following code which works perfect in Chrome, IE8, and FF. However, I get an error when I'm testing it with IE7. Does anyone have a clue what's happening here?
function do_replace(s, p1,p2,p3,child_node,syn_text) {
reg = new RegExp('[h\|H][1-7]');
if(p1.length>0){ //this might not be necessary
//create textnode
var text_node = document.createTextNode(p1);
child_node.parentNode.insertBefore(text_node,child_node); //errors out here in IE7
}
The code errors out at the last line- IE7 give an "htmlfile: Invalid argument." error when I look at the code through a debugger. child_node, parentNode, and text_node appear to be formed identical to Firefox and Chrome when running this script.
Any ideas? Or does IE7 just not support this method as well as other browsers?
Thanks

Rather than leave this problem unsolved, I figured out what was wrong with my code:
I was using an extensive frameset(yuck!!) and when I made the text_node = document.createTextNode() call, I was not doing this in the frame that my application was in.
I fixed this by explicitly calling out the frame to create the object in:
var text_node = MainFrame.child_frame.WhySoManyFrames.document.createTextNode(p1);
After doing this, the insertBefore method works perfect!
Hopefully this helps anyone looking at this question- I know this took me a long time and lots of frustration to figure out!

JavaScript 'InsertBefore' function is supported by IE7. Remember that you have to use this function only when page is fully loaded!
Details

Replacement of .all() function for Browsers other than IE

I am using following code
myEl = document.createElement("myElement") ;
//in a loop
myEl.innerHTML = myEl.innerHTML + currElement.outerHTML ; //some elements getting added to it
var newElement = myEl.all(idToSearch) ;
the last line is not working for browsers other than IE..
I am particularly using Chrome, is there any alternative for it???

You can use querySelector() on elements that aren't yet attached to the document:
var newElement = myEl.querySelector("#" + idToSearch);

all is a proprietary IE extension totally unsupported by standards compliant browsers.
Use document.getElementById() or start looking at libraries like jquery (which would also help with the innerHTML problems you're likely to encounter).