jQuery .attr('type', 'submit') on a button element giving me a strange error in IE7

Question

I'm parsing a JSON response via $.ajax() and building a form from this object's values. The script I've written is long, but here's what it's doing:

1. Dynamically creating:
   ~ a form element,
   ~ a fieldset element,
   ~ a button element,
   ~ 20 or so text inputs and label elements

2. Appending the inputs and labels to the fieldset

3. Appending the button to the fieldset

4. Appending the fieldset to the form

5. Appending the form to an element in the existing DOM.

Everything is working in all browsers except one small snippet in IE. I've narrowed it down to the following piece of code. ( doc is a variable containing document )

fieldset.append(
    $(doc.createElement('button'))
        .addClass('ui-button')
        .attr('type', 'submit')
        .html('Re-Rate')
        .button()
);

This is step 3 from above. It creates a button element, adds a class, sets the type attribute to submit , gives it some text, and then appends it to the fieldset. IE fails with the error "Object doesn't support this action"

If I comment out the .attr() line like this:

fieldset.append(
    $(doc.createElement('button'))
        .addClass('ui-button')
        //.attr('type', 'submit')
        .html('Re-Rate')
        .button()
);

Everything works as expected.

If you're wondering, the .button() method is jQuery UI

Answer 1

jQuery doesn't allow you to change the type of an <input> or <button> element .

The reason for this is consistency, and IE doesn't allow you to change the type once it's been inserted into the DOM.

Answer 2

jQuery won't let you modify the type attribute on an existing button element because IE throws an error when you try to do so.

However, you can try something like this (using jQuery 1.4's more concise element creation syntax):

fieldset.append(
  $('<button>', {'type': 'submit', 'class': 'ui-button', 'html': 'Re-Rate'}).button()
);