使用 JQuery 动态添加 HTML 的最佳方法是什么？

Question

我有以下 HTML：

<div id="dynamicRadioButtons">



</div>

使用 jQuery，我想在上面的 div 中添加一个带有相应标签的单选按钮。我想附加的 HTML 示例如下：

<input type="radio" id="dynamicRadio" name="radio" /><label for="dynamicRadio">My Label</label> <br>

所以，假设我有一个函数，当我单击某些内容时调用它并获取参数 id（这是要创建的单选按钮的 id）和 labelText（这是要创建的标签的文本），我希望能够做这样的事情：

function OnClick(id, labelText){

    // create a new radio button using supplied parameters
    var $newRadioBtn = $('<input />').attr({type="radio", id=id, name="radio"});

    // create a new radio button using supplied parameters
    // TODO - set the value of the label to parameter: labelText
    var $newLabel = $('<label />').attr({for=id});

    // TODO - append the new radio button and label to the div and then append <br>...
    $('#dynamicRadioButtons').append(/* The elements I want to append */);    
}

有人可以帮我处理我的 TODO 位吗？我正在关注一个示例as per this page，但只是对 jQuery 了解不足，无法添加标签等。这也是动态添加 HTML 元素的最佳方式吗？

Answer 1

您可以将标签包裹在表单元素周围，这意味着您不必那么冗长。

<label><input type="radio" id="dynamicRadio" name="radio" />
    My Label
</label>
<br />

你可以像这样创建它：

function OnClick(id, labelText) {

    // create a new radio button using supplied parameters
    var newRadio = $('<input />').attr({
        type: "radio", id: id, name: id
    });

    // create a new radio button using supplied parameters
    var newLabel = $('<label />').append(newRadio).append(labelText);

    // append the new radio button and label
    $('#dynamicRadioButtons').append(newLabel).append('<br />');
}

我已将提供的 id 用作名称和 id，否则所有收音机的名称都会为“radio”。您可能还想重命名 OnClick，因为有称为 onclick 的内置事件处理程序，这可能会导致混淆。

这是一个例子JS Fiddle