Insert radio with label using jQuery

Question

I have created a JS quiz and it holds all the answer choices in arrays. The answer choices are then inserted into a created <input type="radio" . . . . /> element. However the choices, instead of being inside a label, they are held inside the input element alone. Here's to further expand what I'm talking about:

I want it to be like this

Here's the code that creates the inputs:

  // Creates a list of the answer choices as radio inputs
  function createRadios(index) {
    var radioList = $('<ul>');
    var item;
    var input = '';
    for (var i = 0; i < questions[index].choices.length; i++) {
      item = $('<li>');
      input = '<input type="radio" name="answer" value=' + i + ' />';
      input += questions[index].choices[i];
      item.append(input);
    radioList.append(item);
    }
    return radioList;
  }

Any help would be greatly appreciated.

Answer 1

The label should really encompass the radio button for best practices. Try this:

// Creates a list of the answer choices as radio inputs
  function createRadios(index) {
    var radioList = $('<ul>');
    for (var i = 0; i < questions[index].choices.length; i++) {
      var item = $('<li>');
      var label = $('<label>');
      var input = $('<input>', {type: 'radio', name: 'answer', value: i});
      input.appendTo(label);
      label.append(questions[index].choices[i]);
      item.append(label);
      radioList.append(item);
    }
    return radioList;
  }