Безопасная манипуляция с DOM
 

Возник такой вопрос. Есть такая вот функция:

function create_avatar_div (generate_random_number) {
        var div = '',
            avatar_style_container = this.generate_random_position(generate_random_number),
            container_super = []
            for (var i = 0; i < generate_random_number; i++) {
                div = $(document.createElement('div')).addClass('avatar')
                        .css({
                            'width':avatar_style_container.random_width[i],
                            'opacity':avatar_style_container.random_opacity[i],
                            'height':avatar_style_container.random_height[i],
                            'top': avatar_style_container.random_top[i]                            
                        })
                        .attr({
                            'data-coordinate-end-animation':avatar_style_container.random_left[i],
                            'data-coordinate-start-animation':300
                        })
                console.log(div)
                container_super[i] = div
            }
    }

Если сделать console.log(container_super) то выведется весь массив элементов.
Вопрос вот в чем, как можно весь этот массив сразу вставить в div чтобы вместо большого количества манипуляций с DOM сделать это все в один присест?

container_super = document.createDocumentFragment();

container_super.appendChild(div);

Вот какое решение я нашел:
Создаем фейковый блок

var fake_element = $('<div class="fake_element"></div>')

после этого все новые созданные элементы добавляем
в этот элемент

for (var i = 0; i < generate_random_number; i++) {
                pizda.append($(document.createElement('div')).addClass('avatar')
                        .css({
                            'width':avatar_style_container.random_width[i],
                            'opacity':avatar_style_container.random_opacity[i],
                            'height':avatar_style_container.random_height[i],
                            'top': avatar_style_container.random_top[i]                            
                        })
                        .attr({
                            'data-coordinate-end-animation':avatar_style_container.random_left[i],
                            'data-coordinate-start-animation':300
                        }))
                console.log(pizda)
            }

DOM не задет, так как fake_element не в DOM

после того как вышли из цыкла можна наш элемент вставить в любой узел

$('.user-avatar-icon-container').append(fake_element)

просто замечательный метод, я до этого его не встречал, есть что-то подобное в jQuery