javascript – 使用jQuery向DOM注入HTML的最好方法是什么？

我正在一个日历页面上工作,允许用户点击一天,并在弹出的表单中输入该日期的条目.

我并不陌生,DOM操纵与jQuery,但这是我以前做过的事,我开始怀疑是否有更有效的方法来做到这一点？

在JavaScript中手动构建HTML是最有效的方式(我假设这是真的,使用像appendTo()等等),或者在DOM中创建一个隐藏的构造,然后克隆更好？

理想情况下,我想知道这样做的最佳方法,以提供代码整合和性能之间的平衡.

谢谢,

将

解决方法

在JavaScript中使用大量的HTML字符串可以非常快速地变得非常丑陋.因此,可能值得考虑一个JavaScript“模板引擎”.他们不需要复杂 – 通过Resig查看 this one.

如果你不是这样,那么只要你继续下去就可以了.只要记住,与字符串操作相比,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 3'];
var UL = $('<ul/>').append( '<li>' + items.join('</li><li>') + '</li>' );