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'));

Answer 2

您可以从字符串中创建整个事物：

var $mynode = $("<li><label> user <input type=radio></label><li>");

或创建多个节点，然后将它们组合在一起：

var $input = $("<input type=radio>");
var $label = $("<label> user </label>");
var $li = $("<li />");

$label.append($input);
$li.append($label);

我的观点是，你的代码被束缚到很难阅读和理解它。

Answer 3

使用$('input')代替$('<input>')，与label和li相同，

Answer 4

您实际上不必将标记放在选择器函数

中

例如，您的附加代码应为appendTo($('li'))

此外，如果你需要使用jquery DOM操作它们，那么你最好拥有你的元素的id属性否则，当您运行该代码时，页面上的所有LI都会受到影响。

在您将其附加到标签的部分上更明显，如果你能指定appendTo($('li#my_list li').first())

那就太好了

使用DOM创建父子元素

4 个答案: