Question

我正在做以下事情：

$("#fb_friends").append("<div style=\"width:150px;float:left;font-size:11px;color:White;\">");
$("#fb_friends").append("<input type=\"checkbox\" name=\"friends\" value=\"1244524\" />");
$("#fb_friends").append("<img src=\"http://graph.facebook.com/" + friend.id + "/picture\" alt=\"Picture\" style=\"width:24px\">");
$("#fb_friends").append(friend.name);
$("#fb_friends").append("</div>");

然而在我的HTML中，我得到的是：

<div style="width:150px;float:left;font-size:11px;color:White;"></div>
<input type="checkbox" name="friends" value="1244524">
<img src="http://graph.facebook.com/1244524/picture" alt="Picture" style="width:24px">
"friend name"

为什么第一行有一个结束div标签？

更新

我尝试这样做：

$("#fb_friends").append("<div class=\"friend\" style=\"width:150px;float:left;font-size:11px;color:White;\">");
$(".friend").append("<input type=\"checkbox\" name=\"friends\" value=\"1244524\" />");
$(".friend").append("<img src=\"http://graph.facebook.com/" + friend.id + "/picture\" alt=\"Picture\" style=\"width:24px\">");
$(".friend").append(friend.name);

男孩，地狱很慢

Answer 1

追加添加元素，而不是文本。

您想要创建div，并将其他元素附加到div。

var div = $('<div />').css({width:'150px' /*, ... */});
$('<input />', {"type":"checkbox", "name":"friends", value:"1244524" }).appendTo(div);
$('<img />', {"src":"http://graph.facebook.com/" + friend.id + "/picture", alt: "Picture" })
    .style(width: '24px')  
    .appendTo(div);
div.append(friend.name);

$("#fb_friends").append(div);

如果你评估创建html，那也是可能的：

var html = "<div style=\"width:150px;float:left;font-size:11px;color:White;\">" + 
           "<input type=\"checkbox\" name=\"friends\" value=\"1244524\" />" +
           "<img src=\"http://graph.facebook.com/" + friend.id + "/picture\" alt=\"Picture\" style=\"width:24px\">" +
           friend.name + "</div>";
$("#fb_friends").html(html);

Answer 2

@Kobi写了一个很好的解决方案，另一种解决方案是将所有内容写入一个附加

jQuery附加问题

2 个答案: