Question

I want to create the following DOM structure using jQuery.

<li>
  <label> user
    <input type=radio>
  </label>
</li>

Here is my jQuery.

$('<input>')
.attr({type:'radio'})
.appendTo($('<label>'))
.text('user')
.appendTo($('<li>'))

Some how it’s not working or there is something wrong, what would be best practice here?

Answer 1

your problem is this,

$('<input>')
.attr({type:'radio'}) // until this line, input type radio was created as expected.
.appendTo($('<label>')) // you have created label and append the radio button to it.
.text('user') // the problem here, is .text() is referring to $('<input>'), and not the label.
.appendTo($('<li>')) // and you append the radio in a dynamically created li...

I think you have just missed the logic. Try this,

var $li = $('<li>');
var $label = $('<label>').text('user');
var $radio = $('<input>').attr({type:'radio'});

$label.append($radio).appendTo($li);
$li.appendTo('#ULId');

if you want to chain everything, then do it this way,

$('<label>').text('user')
.append($('<input type="radio">'))
.appendTo($('<li>').appendTo('#someULid'));