Создание и добавление большого DOM с помощью JavaScript - наиболее оптимизированный способ?

Question

Я использую следующий код для добавления большого домена в мобильный браузер (webkit):

1. while(i--)  // 'i' ranges from 10 to possibly 1000
2. {
3.   var html01 = ['<div class="test">', someVal[i],'</div>',
4.                 '<div><p>', someTxt.txt1, anotherVal.val[i], '</p></div>',
5.   // lots of html snippets interspersed with variables that differ in each loop iteration
6.                  // on average ~40 to 50 elements in this array
7.                ].join('');
8.   var fragment = document.createDocumentFragment(),
9.   div = fragment.appendChild(document.createElement('div'));
10.  div.appendChild(jQuery(html01)[0]);
11.  someArray[someArray.length] = fragment;
12. } //end while loop
13. jQuery('#screen1').append(someArray);
14. // similarly i create 'html02' till 'html15' to append in other screen divs

Есть ли лучший или более быстрый способ сделать это?Видите ли вы какие-либо проблемы с кодом?Я немного беспокоюсь о строке 10, где я оборачиваюсь в jquery, а затем вынимаю его.

Answer 1

ОБНОВЛЕНИЕ: Обращается к необходимости добавлять уникальные значения

---

Я не эксперт по DOM API, но это создаст нужные элементы, клонирует их в цикле, обновит их значения textNode, добавит их к фрагменту, а затем добавит фрагмент к DOM.

Это будет работать, пока переменные, которые вы предлагаете для текстовых узлов, верны.

    // Form a single fragment outside the loop
       var fragment = document.createDocumentFragment();

    // Create the first div and append a textNode
        var div1 = document.createElement('div');
        div1.appendChild( document.createTextNode('content') );
        div1.setAttribute('class','test');

    // Create the second div, its inner p element, and its textNode
        var div2 = document.createElement('div');
        var p = document.createElement('p');
        p.appendChild( document.createTextNode('content') );
        div2.appendChild( p );

    // Variables to store the clones of above
        var clone1, clone2;

    // Counter for while loop
        var i = 1000;

     while(i--)  // someIndex ranges from 10 to possibly 1000
     {
        // Clone the elements we created
        clone1 = div1.cloneNode(true);
        clone2 = div2.cloneNode(true);

        // Update the nodeValue of the first textNode in div1
        clone1.firstChild.nodeValue = 'someVal[i]';

        // Get the p element in div2 and update its nodeValue
        clone2.firstChild.firstChild.nodeValue = 'someTxt.txt1 + anotherVal.val[i]';

        // Append the elements we created, cloned and updated to the fragment
        fragment.appendChild(clone1).
        fragment.appendChild(clone2);
     }

        // Append the populated fragment to #screen1
     document.getElementById('screen1').appendChild(fragment);

---

EDIT:

Если вы хотите манипулировать законченным фрагментом с помощью jQuery перед его добавлением, вам нужно сделать:

$(fragment.childNodes);  // Create a jQuery object of the content of the fragment

, поскольку это не будет работать правильно:

$(fragment);   // Doesn't work. jQuery methods will be ineffective.    

Answer 2

Зачем вообще оборачиваться в jQuery?Я не вижу никакой выгоды от этого, так как вы можете удалить его без дополнительного кода.

Строка 10
С

div.appendChild(jQuery(html01)[0]);

До

div.innerHTML = html01;

Строка 13
С

jQuery('#screen1').append(fragment);

До

document.getElementById("screen1").appendChild(fragment);

Выигрыш может быть невелик, но он будет там.Кроме этого (и на основе показанного кода) я не вижу способа ускорить процесс.