Создание и добавление большого 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

UPDATE: Адреса необходимость добавлять уникальные значения

---

Я не эксперт 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); 

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