jQuery append issue

Question

I am doing the following:

$("#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>");

however in my html, what I get is:

<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"

Why is there a closing div tag at the first line?

UPDATE:

I tried doing this instead:

$("#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);

boy, it's slow as hell

Kobi · Accepted Answer · 2011-04-28 19:24:21Z

3

Append adds an element, not text.

You want to create the div, and append other element to the 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);

If you rater create the html, that's also possible:

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

edited Apr 28, 2011 at 19:24

answered Apr 28, 2011 at 18:04

Kobi

139k41 gold badges259 silver badges302 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

adit Over a year ago

how do I do that in this case?

Kobi Over a year ago

@Brad - I've edited a lot, it wasn't there before, so the question is legit. But thanks!

adit Over a year ago

I got an Uncaught SyntaxError: Unexpected token = at , alt="Picture"

adit Over a year ago

rather go with append as this is actually executed inside a loop

Amr Elgarhy · Accepted Answer · 2011-04-28 18:14:52Z

0

@Kobi wrote a nice solution, another solution is to write everything in one append

answered Apr 28, 2011 at 18:14

Amr Elgarhy

69.2k70 gold badges193 silver badges311 bronze badges

Collectives™ on Stack Overflow

jQuery append issue

2 Answers 2

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Related