генерация DOM внутри тега div из javascript

#javascript #jquery

Вопрос:

У меня есть эта функция 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, чтобы она заполнила HTML-код внутри этого fb_friends div, который у меня есть. Как мне это сделать?

ОБНОВЛЕНО приведенный выше код не работает

1. Эта строка "<img src="http://graph.facebook.com/' friend.id '/picture" alt="Picture" style="width:24px">" работает? Для меня это выглядит так, как будто вы печатаете «friend.id «вместо идентификатора. Попробуйте заменить одинарные кавычки двойными.

Ответ №1:

Я предполагаю, что вы используете jQuery, основываясь на наличии «$.each».

Попробуйте это внутри вашего цикла «each»:

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

1. итак, я предполагаю, что мне не нужна функция тогда?

2. Я бы посмотрел на ваш код, но из того, что вы опубликовали, я не вижу причин для его использования … кроме того, если вы вызываете его после загрузки DOM и ссылаетесь на имя функции в событии загрузки.

Ответ №2:

Вы должны использовать DOM DocumentFragments вместо document.write. Это более производительно.

Вот интересная статья об этом: http://ejohn.org/blog/dom-documentfragments /

Ответ №3:

Если вы используете jQuery: $('#fb_friends').html('your stuff');

Ответ №4:

Вы используете jQuery, верно?

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