使用纯 Javascript 创建输入 type=radio 并按名称检索它们（ie9 上的 ie7 标准）答案

【问题标题】：Create input type=radio with pure Javascript and retrieve them by name (ie7 standards on ie9)使用纯 Javascript 创建输入 type=radio 并按名称检索它们（ie9 上的 ie7 标准）
【发布时间】：2014-03-07 03:58:27
【问题描述】：

此脚本适用于 IE9：

var newAnswer = document.createElement("input");
newAnswer.setAttribute("type","radio");
newAnswer.setAttribute("id","1");
newAnswer.setAttribute("name","answers");

并生成这个html：

<input name="answers" id="1" type="radio" value="1"/>

我可以创建几个输入 type=radio 并按名称检索它们。

但是如果我将文档模式设置为 ie7 标准，每个生成的输入看起来像：

<input submitName="answers" id="1" type="radio" value="1"/>

（注意 name 属性显示为 submitName）

然后我不能使用类似的东西：

var answers = document.getElementByName("answers");

那么 getElementsByName 不起作用，为什么 IE（文档模式 ie7 标准）创建此属性“submitName”？这是预期的行为吗？我可以让代码在文档模式 ie7 下像在 ie9 模式下一样工作吗？

我已经阅读了几个答案的问题，但我无法得到它。

【问题讨论】：

试试这个：newAnswer.setAttribute("name", "answer", 0);
@cookiemonster 第三个参数是干什么用的？ :O 从没见过。
@MohammadAreebSiddiqui：我也没有。刚刚遇到这个MSDN doc。它似乎设置了在 IE 中如何处理区分大小写。不确定它是否可以解决此问题。
This answer 指向一个展示解决此问题的技术的博客。
有关信息，请参阅 name attribute | name property (Internet Explorer) on MSDN。我还找到了this post。

标签： javascript html internet-explorer

【解决方案1】：

好的，从上一个重新开始，这个我刚刚测试过，它在 IE7 中工作

var testName = null;
function createElementWithName (type, attrs) {
    if(testName ===null) {
        try{
            var x = document.createElement("<input />");
            testName = false;
        } catch(e) {
            testName = true;
        }
    }
    var htmlStr = testName || !attrs.name ? type : '<' + type + ' name="' + attrs.name + '">';
    var elem = document.createElement(htmlStr);    
    for (var prop in attrs) {
         elem.setAttribute(prop, attrs[prop]);   
    }    
    return elem;
}


var attrs = { type: "radio", name: "answers" };

attrs.id="foo1";
var newAnswer1 = createElementWithName("input", attrs);

attrs.id="foo2";
var newAnswer2 = createElementWithName("input", attrs);

attrs.id="foo3";
var newAnswer3 = createElementWithName("input", attrs);

document.getElementById("xxx").appendChild(newAnswer1);
document.getElementById("xxx").appendChild(newAnswer2);
document.getElementById("xxx").appendChild(newAnswer3);

JSFiddle：http://jsfiddle.net/cfC5r/1/show/

【讨论】：