使用 jQuery 性能创建 DOM 元素答案

【问题标题】：Create DOM element with jQuery performance使用 jQuery 性能创建 DOM 元素
【发布时间】：2012-06-22 11:11:31
【问题描述】：

目前我正在使用以下代码将某些元素附加到 DOM：

$('<p/>', { html: data } ).appendTo('.columnLeft');

但是因为需要附加很多元素，所以我有点担心性能。在我使用{ html: data } 之前，我已经尝试过{ text: data }。但是因为有时数据变量中有 html，所以我将其更改为 { html: data }。我真的没有衡量性能的工具，所以我想知道这里是否有人知道什么更快？

感谢阅读！

如下所述，我制作了自己的测试用例，您可以在here 看到它。根据测试，Adam 给出的解决方案是最快的。

【问题讨论】：

【解决方案1】：

使用 jQuery 将 HTML 元素附加到 DOM 的最快方法是将它们附加为 HTML 字符串，如下所示：

var myHTML = '<p>'+data+'</p>';
$('.columnLeft').append(myHTML);

这样 jQuery 就不会在实际附加到 DOM 之前经历必须创建 DOM 元素的过程。

【讨论】：