CODEWITHSUNDEEP
javascriptjquery
adit
adit

Reputation: 33674

generating DOM inside a div tag from javascript

I have this javascript function:

jQuery(document).ready(function() {

            FB.api('/me/friends', function(response) {
                        if(response.data) {
                            $.each(response.data,function(index,friend) {
                                $("#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);
                                //alert(friend.name + ' has id:' + friend.id);
                                $("#fb_friends").append("</div>");
                            });
                        } else {
                            alert("Error!");
                        }
            });

    });

I also have this in my html:

<div id="fb_friends" style="height:280px;overflow:scroll;" >


</div>

I want to call this getFriends function so that it populates the HTML inside this fb_friends div I have. How do I do this?

UPDATED the code above doesn't work

Upvotes: 2

Views: 192

Answers (4)

micha149
micha149

Reputation: 831

You should use DOM DocumentFragments instead of document.write. It is more performant.

Here is an interesting article about that: http://ejohn.org/blog/dom-documentfragments/

Upvotes: 1

Ortiga
Ortiga

Reputation: 8824

You're using jQuery, right?

 $.each(response.data,function(index,friend) {
        html = "<div [...]more html code[...] "+ friend.id + "[...]";
        $("fb_friends").append(html);
 });

Upvotes: 0

Anthony Accioly
Anthony Accioly

Reputation: 22471

If you are using jQuery: $('#fb_friends').html('your stuff');

Upvotes: 0

El Guapo
El Guapo

Reputation: 5781

I assume you are using jQuery based on the presence of the "$.each".

Try this inside of your "each" loop:

$("#fb_friends").append("{your html content or some DOM objects}")

Upvotes: 2

Related Questions