Why does someInputElement.type = 'button'; fail in IE?

Question

I'm stuck trying to get the following javascript to work in IE:

var lastMonthBn = document.createElement('input');
td.appendChild(lastMonthBn);
lastMonthBn.value='<';
lastMonthBn.type = 'button'; // Fails in IE
lastMonthBn.setAttribute('type','button'); // Also fails in IE

For some reason, i cannot set the input to a button, it fails. Works in chrome and firefox. So i'm a little confused and haven't had any luck trying to get it working.

I've isolated it to those lines by using alert()'s.

Thanks a lot

Answer 1

Would this be the reason? From: http://msdn.microsoft.com/en-us/library/ms536389(v=VS.85).aspx

You must perform a second step when you use createElement to create the input element. The createElement method generates an input text box, because that is the default input type property. To insert any other kind of input element, first invoke createElement for input, and then set the type property to the appropriate value in the next line of code.

Answer 2

For IE, you need to set up the button first, before adding it to the document. I.e.:

var lastMonthBn = document.createElement('input');
lastMonthBn.value='<';
lastMonthBn.type = 'button';

td.appendChild(lastMonthBn); // put this last