new earth online

Microsoft Internet Explorer has never been the most compliant of browsers, and it's application of JavaScript is no exception with all it's quirks.

Whilst building some new lightboxes for this site I came across a few interesting quirks in the way that Internet Explorer handles dynamically generated DOM elements. The first of these being dynamically generated buttons.

var lb_inp = document.createElement('button');
lb_inp.innerHTML = 'Log In';
lb_inp.setAttribute('type', 'submit');
lb_inp.name = 'signIn';

The above code is simple enough to understand; it will create a new DOM element that is a button (rather than an input that is a button), will make the button's text "Log In", tell it that it's a submit button, and give it a name of "signIn". Now in Mozilla Firefox this will work without problem; clicking the button will submit the form it belongs to. However, Internet Explorer does not play nice - it doesn't like dynamically created submit buttons using this method and so we have to use the following with IE:

var lb_inp = document.createElement('input');
lb_inp.setAttribute('type', 'submit');
lb_inp.name = 'signIn';
lb_inp.setAttribute('value', 'Log In');

Another quirk is that if you specify that it's a submit button after you tell it that the value (i.e. the text on the button) is, then it will overwrite the value with "Submit Query". So remember, when generating submit buttons on-the-fly with IE you must use an input rather than a button, and must specify the type before the value.