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

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('');
    } 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 $('')
        .val(val)
        .get(0)
}

(as a sidenote, under the hood jQuery is doing what you describe in your question: it creates a dummy

and sets its innerHTML to the