如何在Javascript中动态创建一个适用于所有浏览器的单选按钮？

Question

使用例如动态创建单选按钮

var radioInput = document.createElement('input');
radioInput.setAttribute('type', 'radio');
radioInput.setAttribute('name', name);

适用于Firefox但不适用于IE.为什么不？

Answer 1

从帕特里克的建议迈出一步,使用临时节点,我们可以摆脱try/catch:

function createRadioElement(name, checked) {
    var radioHtml = '<input type="radio" name="' + name + '"';
    if ( checked ) {
        radioHtml += ' checked="checked"';
    }
    radioHtml += '/>';

    var radioFragment = document.createElement('div');
    radioFragment.innerHTML = radioHtml;

    return radioFragment.firstChild;
}

Answer 2

根据这篇文章及其评论:http: //cf-bill.blogspot.com/2006/03/another-ie-gotcha-dynamiclly-created.html

以下作品.显然问题是你无法在IE中动态设置name属性.我还发现你也无法动态设置checked属性.

function createRadioElement( name, checked ) {
    var radioInput;
    try {
        var radioHtml = '<input type="radio" name="' + name + '"';
        if ( checked ) {
            radioHtml += ' checked="checked"';
        }
        radioHtml += '/>';
        radioInput = document.createElement(radioHtml);
    } catch( err ) {
        radioInput = document.createElement('input');
        radioInput.setAttribute('type', 'radio');
        radioInput.setAttribute('name', name);
        if ( checked ) {
            radioInput.setAttribute('checked', 'checked');
        }
    }

    return radioInput;
}