jQuery create element with attribute differences

Question

Discovered something and am looking into a bit of incite as to why one way works and the other doesn't. Looks to be only an IE7 thing but as IE7, sigh, still needs some support in the apps I work in.

Way that works in IE7

var month = jQuery('<input/>');
month.attr('id', 'DOBmonth');
month.attr('title', 'Enter month');
month.attr('type', 'text');
month.attr('size', '1');
month.attr('maxlength', '2');
month.attr('class', 'numbersOnly');
month.attr('value', mm);

This way doesn't work

var month = jQuery('<input/>', {
        id: 'DOBmonth',
        title: 'Enter month',
        type: 'text',
        size: 1,
        maxlength: 2,
        class: 'numbersOnly',
        value: mm
        });

Anyone have an idea why only one way works in IE7 but either is fine in IE8+, FF, Chrome and Safari.

Answer 1

The answer can be found in the API for the jQuery() function itself.

Note: Internet Explorer will not allow you to create an input or button element and change its type; you must specify the type using <input type="checkbox" /> for example. A demonstration of this can be seen below:

Unsupported in IE:

$('<input />', {
    type: 'text',
    name: 'test'
}).appendTo("body");

Supported workaround:

$('<input type="text" />').attr({
    name: 'test'
}).appendTo("body");