Question

1. var checkbox_html = $("<input type='checkbox' name='' value='' class='attach'/>");
3. var span_html = $("<span class='style'>" + $(item).attr('value') + "</span>");
3. $("#disallowed_list").append('<li><label>' + checkbox_html + span_html + '</label></li>');

这导致

[object Object][object Object]

为什么我没有在这里获取html元素？

更新：

我还需要在输入复选框中更改名称和值的属性。所以我把$保留在checkbox_html值的前面。

像这样，

$(checkbox_html).attr("name", $(item).attr('name'));
$(checkbox_html).attr("value", $(item).attr('value'));

Answer 1

试试这个：

var checkbox_html = "<input type='checkbox' name='' value='' class='attach'/>";
var span_html = "<span class='style'>" + $(item).attr('value') + "</span>";
$("#disallowed_list").append('<li><label>' + checkbox_html + span_html + '</label></li>');

由于您使用的是创建HTML对象的[object Object][object Object]，因此您获得了$

Working Demo

如果您还要设置值，可以执行以下操作：

var checkbox_html = "<input type='checkbox' name='"+$(item).attr('name')+"' value='"+$(item).val()+"' class='attach'/>";

Updated DEMO

更新

@tilaprimera想要的方式

var checkbox_html = $("<input type='checkbox' name='' value='' class='attach'/>");
var span_html = $("<span class='style'>" + $(item).attr('value') + "</span>");
var li = $('<li></li>');
var label = $('<label></label>');

li.append(label);
label.append(checkbox_html);
label.append(span_html);
$("#disallowed_list").append(li);

$(checkbox_html).attr("name", $(item).attr('name'));
$(checkbox_html).attr("value", $(item).attr('value'));

Latest DEMO

Answer 2

问题是checkbox_html和span_html是jQuery对象。你不能只把它们放在一个字符串的中间，并期望它们吐出HTML。要获取HTML，您可以使用原生outerHTML。

$("#disallowed_list").append('<li><label>' + checkbox_html.get(0).outerHTML + span_html.get(0).outerHTML + '</label></li>');

此外，在您的第二个示例中，我看到您正在使用$(checkbox_html)。您不需要这样做，因为checkbox_html已经是一个jQuery对象。你可以这样做：

checkbox_html.attr("name", $(item).attr('name'));
checkbox_html.attr("value", $(item).attr('value'));

这就是为什么最好使用$来为jQuery对象添加前缀，这样你就不会意外地对对象进行双重包装（不是它会破坏任何东西，但这只是糟糕的做法）。例如：

var $checkbox_html = $("<input type='checkbox' name='' value='' class='attach'/>");
var $span_html = $("<span class='style'>" + $(item).attr('value') + "</span>");

然后使用这样的代码来访问这些变量：

$checkbox_html.attr("name", $(item).attr('name'));
$checkbox_html.attr("value", $(item).attr('value'));

在这种情况下，很容易看出$($checkbox_html)不正确而无需检查变量类型。

试图附加HTML元素。

2 个答案:

更新