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

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

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

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

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

Спасибо,

Воля

Ответ 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>' );

Ответ 2

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

Ответ 3

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

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