设置DOM创建的元素的名称在IE中失败 - 解决方法？

Question

今天我有点辛苦了:

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

    return inp;
}

事实证明,设置name通过创建的元素createElement在IE中不起作用.它不会导致错误或任何事情,它只是默默地失败,导致人们思考为什么他们的隐藏字段没有正确填充.

据我所知,没有解决方法.你必须咬住子弹并<input>通过字符串操作创建标签并将其粘贴在其中.innerHTML.

有没有更好的办法？也许像jQuery这样的东西？我做了一个粗略的搜索,并没有找到任何与createElementJQuery 完全类似的东西,但也许我错过了一些东西.

Answer 1

只是重新迭代问题:在IE中,编程设置name通过创建一个元素属性document.createElement('input')不反映在getElementsByName,form.elements(如果附加到一种形式),并且不与所提交的form(同样,如果附加到一个表格)[ 参考 ].

这是我过去使用过的解决方法(从这里开始适应你的问题):

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
}

这类似于特征检测(与浏览器检测相反).第一个createElement将在IE中取得成功,而后者将在符合标准的浏览器中取得成功.

当然,自从您标记问题后,jQuery等效:

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

(作为旁注,jQuery正在做你在你的问题中描述的内容:它创建一个虚拟对象<div>并将其设置innerHTML为<input type="...上面传递的字符串).

正如@jeffamaphone指出的那样,这个bug已在IE8中得到修复.