使用jQuery将HTML注入DOM的最佳方式是什么？

Question

我正在开发一个日历页面，允许用户点击某一天，并通过弹出的表单输入当天的信息。

我熟悉使用jQuery进行DOM操作，但我开始怀疑是否有更高效的方法来完成这个任务？

在性能方面，手动在JavaScript中构建HTML是否是最有效的方式（我认为这比使用如appendTo()等函数更好），还是创建DOM中的隐藏结构，然后克隆它会更好？

理想情况下，我想知道最佳方法，以在代码整洁和性能之间取得平衡。

谢谢， Will

- Will Morgan

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>' );

- James

Answer 2

这里可以找到相关解释。

- Artem Barger

Answer 3

也许不是最流行的方法。

在后端生成HTML代码。对话框将位于CSS隐藏的div中。当您想要它“弹出”时，只需应用不同的CSS样式并更改隐藏输入值（我猜对话框与特定日期交互）。

- Silviu Postavaru