javascript - 使用 DOM 创建父子元素

Question

我想使用 jQuery 创建以下 DOM 结构。

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

这是我的 jQuery。

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

有些它不起作用或有问题，这里的最佳实践是什么？

Answer 1

你的问题是这样的，

$('<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...

我认为你刚刚错过了逻辑。试试这个，

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

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

如果你想链接所有东西，那么就这样做，

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