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.

IE7 and earlier have a write-once policy vis-a-vis type on input elements (once you set it, you can't change it). Guessing (hence not posting an answer), that for whatever reason, the first example is falling afoul that policy and the second isn't. Again, not an answer, but perhaps some insight. — T.J. Crowder
– T.J. Crowder, Commented Mar 27, 2012 at 22:17

Anthony Grist · Accepted Answer · 2012-03-27 22:17:50Z

29

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");

answered Mar 27, 2012 at 22:17

Anthony Grist

38.4k8 gold badges64 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Joseph · Accepted Answer · 2012-03-27 22:21:11Z

5

according to jQuery:

Note: Internet Explorer will not allow you to create an input or button element and change its type; you must specify the type

this doesn't work:

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

but this does:

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

answered Mar 27, 2012 at 22:21

Joseph

120k31 gold badges186 silver badges238 bronze badges

Collectives™ on Stack Overflow

jQuery create element with attribute differences

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related