如何使用 jQuery 高效创建 DOM 元素？

使用 jQuery 创建 DOM 元素

如果您希望增强 JavaScript 代码，您会对利用 jQuery 的功能来简化 DOM 操作感到好奇.

jQuery 确实提供了创建 DOM 元素的替代方法，正如您所注意到的$.create("div").然而，这种方法不是 jQuery 核心 API 的一部分，并且可能并不总是可靠的。

要获得更高效和标准化的解决方案，请考虑以下内容：

this.$OuterDiv = $('<div></div>')
    .hide()
    .append($('<table></table>')
        .attr({ cellSpacing : 0 })
        .addClass("text")
    )
;

这段简洁的代码完成了与您的原始 JavaScript 相同：

• 创建一个
  ;使用 $('

  ) 的元素。
• 使用 .hide() 隐藏它。
• 附加一个 ;使用 $.append() 的元素，设置其属性并添加类。

  基准测试结果

  关于不同元素创建方法的性能，一个基准据透露，document.createElement 是最快的。然而，在现代版本的 jQuery 中，这些方法之间的时间差异很小（例如，每千个元素 3 毫秒）。

  更新为 jQuery 1.7.2

  基准测试已使用 jQuery 1.7.2 进行更新，可在 http://jsben.ch/#/ARUtz 上进行进一步探索和众包结果。