jquery - 使用 jQuery 性能创建 DOM 元素

Question

目前我正在使用以下代码将某些元素 append 到 DOM:

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

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

感谢您的阅读!

正如下面评论的，我制作了自己的测试用例，你可以看到它 here 。根据测试，Adam给出的解决方案是最快的。

Answer 1

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

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

这样，jQuery 在将 DOM 元素实际 append 到 DOM 之前就不必经历创建 DOM 元素的过程。