使用JQuery动态添加HTML的最佳方式是什么？ [英] What's the best way to add HTML dynamically with JQuery?

问题描述

我有以下HTML：

 < div id =dynamicRadioButtons> 
 
 
 
< / div> 
  

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

 < input type =radioid = dynamicRadioname =radio/>< label for =dynamicRadio>我的标签< / label> <峰; br> 
  

所以，假设我有一个函数被调用，当我点击一些东西并将参数id是要创建的单选按钮的id）和labelText（这是要创建的标签的文本），我希望能够做到这样的事情：

< pre $ function使用提供的参数创建一个新的单选按钮
var $ newRadioBtn = $（'< input />').attr({type=\"radio，id = id，name =radio}）;

//使用提供的参数创建一个新的单选按钮
// TODO - 将标签的值设置为参数：labelText
var $ newLabel = $（'< label />').attr({for=id}）;

// TODO - 将新单选按钮和标签追加到div，然后追加< br> ...
$（'＃dynamicRadioButtons'）。append（/ * The elements我想追加* /）;
}


有人可以帮助我处理我的TODO位吗？我按照此页面的示例但只是不太了解jQuery添加标签等等。此外，这是动态添加HTML元素的最佳方式吗？

解决方案

<

 < p>您可以将标签贴在表单元素的周围，这意味着您不必非常详细。 ;标签>< input type =radioid =dynamicRadioname =radio/> 
我的标签
< / label> 
< br /> 
  

您可以像这样创建它：

< pre $ function使用提供的参数创建一个新的单选按钮
var newRadio = $（'< input />'）。attr（{
type：radio，id：id，name：id
}）;

//使用提供的参数创建一个新的单选按钮
var newLabel = $（'< label />'）.append（newRadio）.append(labelText）;

//追加新的单选按钮并贴上
$（'＃dynamicRadioButtons'）。append（newLabel）.append（'< br />'）;
}


我使用提供的id作为名称和id，否则所有的收音机都会有一个收音机的名字。您可能还需要重命名 OnClick ，因为在 onclick 事件处理程序中内置了内容，可能会导致混淆。 p>

以下是一个 JS小提琴

I have the following HTML:

<div id="dynamicRadioButtons">



</div>

Using jQuery I'd like to append a radio button with corresponding label to the above div. An example of the HTML I'd like to append is as follows:

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

So, lets say I have a function that's called when I click something and takes the parameters id (which is the id of the radio button to be created) and labelText (which is the text of the label to be created), I want to be able to do something like this:

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 */);    
}

Can someone help me with my TODO bits please? I was following an example as per this page but just don't know enough about jQuery to add the label etc. Also is this the best way to dynamically add HTML elements?

解决方案

You can wrap your label around the form element, which means you don't have to be quite so verbose.

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

And you can create it like this:

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 />');
}

I have used the supplied id for the name and id, otherwise all radios would have a name of "radio". You might also want to rename OnClick as there are build in event handlers called onclick and it might cause confusion.

Here is an example JS Fiddle

这篇关于使用JQuery动态添加HTML的最佳方式是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！