Question

Why is it that the texts for the radio buttons fail to render when the following code runs:

<div id='sctices'></div>​

var result = [
               {"id":"G84","value":"Mman, J"},
               {"id":"G95","value":"Ekara, G"},
               {"id":"G98","value":"Gedala, PS"}
             ];


var key, count = 0;
for(key in result) 
{
  var btnId = result[key].id;
  var btnValue = result[key].value;

    var radio = $("<input></input>",
    {
         type: 'radio',
         name: 'gtice',
         class: 'radio-default',
         checked: false,
         value: btnValue,
         id: btnId,
         text: btnValue
    });

//radio.text(btnValue);// did not work
radio.insertAfter("#sctices");
radio.wrap("<div></div>");
}

Please help. Strangely, the text appears in generated source. Thanks

Answer 1

It’s because the radio input does not display any text. The general practice is to use a label element alongside it for that. Try adding this line:

var $label = $("<label></label>").text(btnValue).prepend(radio);

Example fiddle