Question

我有这个javascript函数：

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!");
                        }
            });

    });

我的html中也有这个：

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


</div>

我想调用这个getFriends函数，以便在我拥有的这个fb_friends div中填充HTML。我该怎么做？

更新上面的代码不起作用

Answer 1

我假设您正在使用基于“$ .each”存在的jQuery。

在“每个”循环中尝试这个：

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

Answer 2

您应该使用DOM DocumentFragments而不是document.write。它性能更高。

以下是一篇有趣的文章：http://ejohn.org/blog/dom-documentfragments/

Answer 3

如果您使用的是jQuery：$('#fb_friends').html('your stuff');

Answer 4

你正在使用jQuery，对吧？

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

从javascript生成div标签内的DOM

4 个答案: