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