使用JQuery动态添加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元素的最佳方式吗？

我有一个烂摊子有关的jsfiddle以及与此解决方案，它是足以让我保持与工作，但这个是最好的办法想出了？ http://jsfiddle.net/uNNMr/881/ –

答

您可以将标签包裹在表单元素的周围，这意味着您不必非常详细。

<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，否则，所有的无线电将有“无线电”的名称。您可能还想重命名为OnClick，因为在事件处理程序中内置了名为onclick的内部版本，可能会导致混淆。

下面是一个例子JS Fiddle

谢谢，这很完美！关于方法名称OnClick的好处 - 我只是不经意地将其作为例子输入。 –

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

相关推荐