如何使用 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 上進行進一步探索和眾包結果。