Setting name of DOM-created element fails in IE — workaround?

Question

I got bit hard by this today:

function mk_input( name, val ) {
    var inp = document.createElement( \'input\' );
    inp.name = name;
    inp.value = val;
          


        

Answer 1

They fixed this in IE8. In previous versions, you need to include the name when you call createElement. From MSDN:

Internet Explorer 8 and later can set the NAME attribute at run time on elements dynamically created with the IHTMLDocument2::createElement method. To create an element with a NAME attribute in earlier versions of Internet Explorer, include the attribute and its value when using the IHTMLDocument2::createElement method.

Here is the example from MSDN:

var newRadioButton = document.createElement("<INPUT TYPE='RADIO' NAME='RADIOTEST' VALUE='First Choice'>")

Answer 2

Just to re-iterate the problem: in IE, programatically setting the name attribute on an element created via document.createElement('input') is not reflected in getElementsByName, form.elements (if appending to a form), and is not submitted with the form (again, if appending to a form) [Reference].

Here's the workaround I've used in the past (adapted to your question from here):

function mk_input( name, val ) {
    var inp;
    try {
        inp = document.createElement('<input type="hidden" name="' + name + '" />');
    } catch(e) {
        inp = document.createElement("input");
        inp.type = "hidden";
        inp.name = name;
    }
    inp.value = val;
    return inp
}

This is akin to feature detection (as opposed to browser detection). The first createElement will succeed in IE, while the latter will succeed in standards-compliant browsers.

And of course the jQuery equivalent since you tagged the question as such:

function mk_input( name, val ) {
    return $('<input type="hidden" name="' + name + '" />')
        .val(val)
        .get(0)
}

(as a sidenote, under the hood jQuery is doing what you describe in your question: it creates a dummy <div> and sets its innerHTML to the <input type="... string passed above).

As @jeffamaphone points out, this bug has been fixed in IE8.