Каков наилучший способ внедрить HTML в DOM с помощью jQuery?

Question

Я работаю над страницей календаря, которая позволяет пользователю нажимать на день и вводить запись для этого дня с всплывающей формой.

Я не новичок в манипулировании DOM с помощью jQuery, но это то, что я делал раньше, и я начинаю задумываться, есть ли более эффективный способ сделать это?

Было бы построение HTML вручную в JavaScript наиболее эффективным способом с точки зрения производительности (я полагаю, это правда, если использовать такие функции, как appendTo () и т. Д.) Или создание скрытой конструкции в DOM, а затем клонирование было бы лучше?

В идеале я хочу знать оптимальный способ сделать это, чтобы обеспечить баланс между аккуратностью кода и производительностью.

Спасибо

Будет

Answer 1

Работа с огромными кусками строк HTML в JavaScript может стать очень уродливой очень быстро. По этой причине, возможно, стоит рассмотреть «шаблонный движок» JavaScript. Они не должны быть сложными - Проверьте этот Resig.

Если вы не готовы к этому, то, вероятно, будет хорошо, если вы продолжите в том же духе. Просто помните, что манипулирование DOM обычно довольно медленное по сравнению с манипуляциями со строками.

Пример этого разрыва производительности:

// DOM manipulation... slow
var items = ['list item 1', 'list item 2', 'list item 3'];
var UL = $('<ul/>');
$.each(items, function(){
    UL.append('<li>' + this + '</li>');
});

// String manipulation...fast
var items = ['list item 1', 'list item 2', 'list item 3'];
var UL = $('<ul/>').append( '<li>' + items.join('</li><li>') + '</li>' );

Answer 2

Здесь вы можете найти объяснение.

Answer 3

Возможно, не самый популярный подход.

Получите HTML-код, сгенерированный в бэкэнде. Диалог будет в css скрытом div. Когда вы хотите, чтобы он «поп», просто примените различные стили CSS и измените скрытое значение ввода (я думаю, диалог взаимодействует с этой определенной датой).