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