Javascript jQuery лучший способ вставить большой кусок кода в DOM

Question

У меня есть большой кусок кода, который должен быть вставлен в DOM в какой-то момент. Код также содержит некоторые переменные:

<ul id="info'+value+'" class="info"><li class="hide"></li><li class="lock"><ul>
// just a piece of the code with variable "value"

Прямо сейчас я делаю:

var codeToInsert = "<some code/>"
codeToInsert.insertAfter('#someID');

Есть ли лучший способ сделать это с точки зрения производительности?

Answer 1

Если вы хотите вставить большой кусок кода, используйте jQuery для его селектора, а затем используйте свойство innerHTML DOM - это самый быстрый способ вставить большой кусок HTML. Не переносите строку, которая должна быть вставлена ​​в JQuery, оставьте ее как строку.

Например: $('#somePlaceholder')[0].innerHTML = myHTMLString;.

http://www.quirksmode.org/dom/w3c_html.html:

В общем, innerHTML быстрее, чем обычные методы DOM, потому что анализатор HTML всегда быстрее, чем механизм DOM. Если вы хотите сделать сложные изменения, используйте innerHTML. (Для простых изменений не имеет значения, какой метод вы используете, хотя innerHTML теоретически остается быстрее.)

Если вы выполняете конкатенацию строк в JS, создайте массив, push() части и join() в конце, вместо добавления, например, с помощью. += или +. Это имеет значение ESP. в IE.

Answer 2

В верхней части головы вы также можете использовать .append (), .appendT (), .before (), .after () и т. Д. Проверьте это для ряда таких функций: http://api.jquery.com/category/manipulation/