Question

尝试使用JQuery向li标签添加单选按钮时，这两个语句之间有什么区别？

var inputText = $("<input />", {"type":"radio", "name":"choices", "value":choices[i],     "text":choices[i]});'

var inputText =$("<li />").html( '<input type="radio" name="choices" value="'+choices[i]+'">' + choices[i] + '</input>');

前者不会在HTML页面上的单选按钮旁边显示任何文本，即使在检查元素上HTML代码正确，而后者正确显示也是如此。我更喜欢以前的语法，因为它更干净，但我不能让它工作。

Answer 1

input元素包含文本无效。如果您查看the spec，您会看到：

开始标记：必填，结束标记：禁止

在第一个示例中，jquery将文本放在输入标记内，浏览器不显示该标记，因为它无效。像这样：

<input>text here</input>

在第二个示例中，即使您尝试使其无效，也会转换为：

<input>
text here

如果您检查它，您将看到文本在输入之外，因此显示。

实际上，这两种方法都是错误的，即使第二种方法在技术上有效，也应该停止结束标记：

var inputText =$("<li />").html('<input type="radio" name="choices" value="'+choices[i]+'">' + choices[i]);

Answer 2

詹姆斯。另外：如果你想在第一个例子中保留语法，我想你可以使用：

$('<label />').append($("<input />", {"type":"radio", "name":"choices", "value":"foo" }).after('foo'))

它还将您的输入包装在一个漂亮的label元素中，这样您也可以单击文本标签。

使用Jquery无法按预期工作将无线电按钮添加到无序列表

2 个答案: