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;
    inp.type = 'hidden';

    return inp;
}

As it turns out, setting the name of an element created via createElement doesn't work in IE. It doesn't cause an error or anything, it just silently fails, causing one to ponder why their hidden fields aren't getting populated correctly.

As far as I can tell, there's no workaround. You have to just bite the bullet and create the <input> tag through string manipulation and stick it in with .innerHTML instead.

Is there a better way? Perhaps with something like jQuery? I did a cursory search and didn't find anything exactly akin to createElement in JQuery, but maybe I missed something.

Answer 1

It works fine, just make sure you specify the type property first...

var inp = document.createElement( 'input' );
inp.type = "hidden";
inp.name = "test";
alert(inp.name);
document.body.appendChild(inp);
alert(document.body.lastChild.name);

Answer 2

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 3

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.