What's The Best Way To Add Html Dynamically With Jquery?

I have the following HTML:

Using jQuery I'd like to append a radio button with corresponding label to the above div. An examp

Solution 1:

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

<label><inputtype="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 parametersvar newRadio = $('<input />').attr({
        type: "radio", id: id, name: id
    });

    // create a new radio button using supplied parametersvar 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