Javascript 如何将单选按钮集动态添加到页面

我试图创建一组单选按钮，我可以很容易地克隆一个按钮点击。我遇到了一些困难，因为底层HTML需要将标签附加到DOM树上的特定ID。我对如何使用javascript将新代码安全地注入DOM的理解是，我不能使用ID，因为它们都必须是唯一的。有没有一种可以接受的方法来进行这种类型的克隆，而不必维护额外的javascript变量来拼凑单选按钮ID

另外：我需要能够删除这些按钮集自由

---

可以在

中找到一把小提琴，它演示了问题以及我试图实现的目标。我通常只会在每次向DOM添加新输入时将自动生成的ID增加一个：

<input type="button" id="addRadio" value="Add Radio Button" />
            <div id="container">
                <input type="radio" name="myRadio" id="myRadio1" />
                <label for="myRadio1">Radio 1</label>
            </div>

<script type="text/javascript">
            $(document).ready(function() {
                var maxId = 0;
                $('#addRadio').click(function() {
                    var nextId = (!maxId) ? $("input[name='myRadio']").length + 1 : maxId + 1;
                    var wrap = $('<div>').attr('id', 'wrap' + nextId);
                    wrap.append($('<input>').attr({
                        type : 'radio',
                        name : 'myRadio',
                        id : 'myRadio' + nextId
                    }));
                    wrap.append($('<label>').attr({
                        for : 'myRadio' + nextId
                    }).html('Radio' + nextId));
                    wrap.append($('<a>').attr({
                        href : 'javascript:void(0);'
                    })
                    .click(function() {
                        $('#wrap' + nextId).remove();
                    })
                    .html('Delete'));
                    $('#container').append(wrap);

                    maxId = nextId;
                });
});
</script>

第一台
$（文档）.ready（函数（）{
var-maxId=0；
$（'#addRadio'）。单击（函数（）{
var nextId=（！maxId）？$（“输入[name='myRadio']”）。长度+1:maxId+1；
var wrap=$（''）.attr（'id'，'wrap'+nextId）；
wrap.append（$（''）.attr({
键入：“收音机”，
名称：“myRadio”，
id:'myRadio'+nextId
}));
wrap.append（$（''）.attr({
对于：“myRadio”+nextId
}).html（'Radio'+nextId））；
wrap.append（$（''）.attr({
href:'javascript:void（0）；'
})
。单击（函数（）{
$（'#wrap'+nextId）.remove（）；
})
.html（“删除”）；
$（'#container'）。追加（包装）；
maxId=nextId；
});
});

要将标签与收音机链接，而不是使用JS变量进行维护，您可以生成一个像GUID一样的唯一ID，并直接使用它

删除块时，不需要ID，因为块中有close HtmleElement，所以可以使用parent（）函数和remove（）函数来执行此操作

以下是一个例子：

/**
 * Generate a guid part
 */
function GuidPart()
{
    return Math.floor(Math.random() * 0x10000).toString(16);
}

/**
 * Generate a new GUID
 */
function getGuid()
{
    return (GuidPart() + GuidPart() + "-" +
            GuidPart() + "-" +
            GuidPart() + "-" +
            GuidPart() + "-" +
            GuidPart() + GuidPart() + GuidPart());
}

/**
 * Build a new block with radio, label and close span
 */
function buildNewRadio(labelText)
{
    // Retrieve a new guid
    var guid = getGuid();

    // Create a span container with the radio and label inside
    // linked together by the guid
    var container = $(document.createElement("span")).append(
        $(document.createElement("input")).attr('id', guid),
        $(document.createElement("label")).attr('for', guid).val(labelText))
        .addClass("container");

    // Finally append the close span (use to remove the entiere block)
    container.append(
        $(document.createElement("span").addClass("close")
            .click(function(mouseEvent) {
                // Retrieve the span container and remove it
                $(this).parent().remove();
            }));

    return container;
}

---

您可以调用buildNewRadio函数并将结果HTMLElement附加到DOM容器

我喜欢这种方法不需要占用DOM中的任何实际名称空间。我主要关心的是数学的随机性。random（）。讨论了如何创建guid，一些评论指出，没有好的文档说明javascript在多大程度上符合熵要求，以获得完整的2^122个格式正确的guid。您以前在使用此代码时是否遇到过唯一性问题？