Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.07.2012, 01:10
Интересующийся
Отправить личное сообщение для W1nD Посмотреть профиль Найти все сообщения от W1nD
 
Регистрация: 19.04.2011
Сообщений: 15

Безопасная манипуляция с 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 сделать это все в один присест?
Ответить с цитированием
  #2 (permalink)  
Старый 11.07.2012, 01:20
Аватар для Aetae
Любитель
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 5,622

Пример: Cтрока 4
container_super = document.createDocumentFragment();


Пример: Cтрока 18
container_super.appendChild(div);
__________________
29375, 35

Последний раз редактировалось Aetae, 11.07.2012 в 01:22.
Ответить с цитированием
  #3 (permalink)  
Старый 11.07.2012, 01:25
Интересующийся
Отправить личное сообщение для W1nD Посмотреть профиль Найти все сообщения от W1nD
 
Регистрация: 19.04.2011
Сообщений: 15

Вот какое решение я нашел:
Создаем фейковый блок
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)
Ответить с цитированием
  #4 (permalink)  
Старый 11.07.2012, 01:31
Интересующийся
Отправить личное сообщение для W1nD Посмотреть профиль Найти все сообщения от W1nD
 
Регистрация: 19.04.2011
Сообщений: 15

Сообщение от Aetae Посмотреть сообщение
Пример: Cтрока 4
container_super = document.createDocumentFragment();


Пример: Cтрока 18
container_super.appendChild(div);
Сообщение от Aetae
document.createDocumentFragment()
просто замечательный метод, я до этого его не встречал, есть что-то подобное в jQuery
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Получить список ВСЕХ элементов DOM Почемучкин Events/DOM/Window 7 16.04.2012 10:33
IE баг со скоростью обработки DOM Rootpassword Events/DOM/Window 2 13.02.2012 16:16
Новый элемент отсутствует в DOM модели StrSprut jQuery 4 19.09.2011 11:50
Как в браузерах реализуются функции DOM (например createElement) iamme Общие вопросы Javascript 7 02.09.2011 19:26
Где найти справочник методов DOM? master_alf Events/DOM/Window 6 16.04.2010 11:25