使用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样式并更改隐藏的输入值（我猜对话框与该特定日期交互）。