Question

i have a problem in setting the labels and alignment of dynamically created radio buttons , i want to retrieve a value from a text box and use this value as a label for the new generated radio button, i tried this code it generates radio button but it doesn’t give it a label(the one retrieved from the text box) also it generate radio buttons horizontally not vertically:
HTML:

<input type="text" name="option" id="option" value=""  /><br>
<div id="AddButton" data-role="button" data-inline="true">Add</div>

<div data-role="fieldcontain">
  <fieldset data-role="controlgroup">
    <legend>Choose an Option:</legend><br><br>
    <div id="after">

    </div>
  </fieldset>
</div>

JavaScript:

<script>
  function createRadioElement(elem, label, checked) {
    var input = document.createElement('input');
    input.type = 'radio';
    input.label = value;

    if (checked) {
      input.checked = 'checked';
    }
    elem.parentNode.insertBefore(input,elem.nextSibling)
  }    

  $( '#admin' ).live( 'pageinit',function(event){
    $('#AddButton').click(function(){
      var x = document.getElementById('option').value

      createRadioElement(this,$('#option').val());
    }); 
  });
</script>

Answer 1

You could do something like

$('#AddButton').click(function(){
  var label = document.getElementById('option').value;
   $radio = $('<input />', { type: "radio" });
   var $label = $('<label />', { text: label});
   var wrapper = $('<div />');
   wrapper.append($label).append($radio);;

    $('div#after').append(wrapper);

}); 

fiddle here http://jsfiddle.net/h8g6S/