generating DOM inside a div tag from javascript
<p>I have this javascript function:</p>

<pre><code>jQuery(document).ready(function() {

            FB.api('/me/friends', function(response) {
                        if(response.data) {
                            $.each(response.data,function(index,friend) {
                                $("#fb_friends").append("&lt;div style=\"width:150px;float:left;font-size:11px;color:White;\"&gt;");
                                $("#fb_friends").append("&lt;input type=\"checkbox\" name=\"friends\" value=\"1244524\" /&gt;");
                                $("#fb_friends").append("&lt;img src=\"http://graph.facebook.com/' + friend.id + '/picture\" alt=\"Picture\" style=\"width:24px\"&gt;");
                                $("#fb_friends").append(friend.name);
                                //alert(friend.name + ' has id:' + friend.id);
                                $("#fb_friends").append("&lt;/div&gt;");
                            });
                        } else {
                            alert("Error!");
                        }
            });

    });
</code></pre>

<p>I also have this in my html:</p>

<pre><code>&lt;div id="fb_friends" style="height:280px;overflow:scroll;" &gt;


&lt;/div&gt;
</code></pre>

<p>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?</p>

<p><strong>UPDATED</strong> the code above doesn't work</p>
