使用jQuery將HTML注入DOM的最佳方法是什么？

Question

我正在制作一個日歷頁面，允許用戶點擊一天，然后使用彈出的表單輸入當天的條目。

我對jQuery的DOM操作並不陌生，但這是我以前做過的事情，我開始懷疑是否有更有效的方法來做到這一點？

在JavaScript中手動構建HTML是性能最有效的方式（我假設這是真的，比使用appendTo（）等函數）或者在DOM中創建一個隱藏的構造然后克隆它會更好嗎？

理想情況下，我想知道這樣做的最佳方法，以便在代碼整潔性和性能之間取得平衡。

謝謝，

將

Answer 1

在JavaScript中處理大量的HTML字符串會很快變得非常難看。 因此，考慮使用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樣式並更改隱藏的輸入值（我猜對話框與該特定日期交互）。