使用jQuery创建HTML元素的最有效方法是什么?

最近我做了很多模态窗口弹出之类的事情，为此我使用了jQuery。我用来在页面上创建新元素的方法基本上是这样的:

$("<div></div>");

然而，我感觉这并不是最好或最有效的方法。从性能的角度来看，用jQuery创建元素的最佳方法是什么?

这个答案有以下建议的基准。

当前回答

如果您有很多HTML内容(不仅仅是一个div)，您可以考虑将HTML构建到隐藏容器中的页面中，然后更新它并在需要时使其可见。这样，浏览器就可以预先解析大部分标记，避免在调用时被JavaScript缠住。希望这能有所帮助!

其他回答

我认为你使用了最好的方法，尽管你可以优化它:

 $("<div/>");

我正在使用jquery。Min v2.0.3。对我来说，最好使用以下方法:

var select = jQuery("#selecter");
jQuery("`<option/>`",{value: someValue, text: someText}).appendTo(select);

如下:

var select = jQuery("#selecter");
jQuery(document.createElement('option')).prop({value: someValue, text: someText}).appendTo(select);

第一段代码的处理时间比第二段代码要短得多。

从CPU的角度来看，您不需要一个极少执行的操作的原始性能。

这不是问题的正确答案，但我仍然想分享这个……

使用document.createElement('div')而跳过JQuery将大大提高性能，当你想要动态制作大量元素并附加到DOM时。

有一点可能更容易做到:

$("<div class=foo id=bar style='color:white;bgcolor:blue;font-size:12pt'></div>")

然后用jquery调用完成所有这些。

推荐文章