Question

我想知道使用jQuery创建DOM元素时性能（或最佳实践）是否存在差异。

根据我的知识，有3种方法可以做到这一点：

字符串：

$('<a href="http://www.example.com" class="footerLink" rel="external">example</a>');`

首先创建元素，稍后添加属性：

$('<a></a>')
  .addClass('footerLink')
  .attr({ 
     rel: 'external, 
     href: 'http://www.example.com' 
  })
  .text('example');

使用它创建元素并传递属性对象：

$('<a></a>', {
  'class': 'footerLink', 
  href: 'http://www.example.com',
  rel: 'external'
})
.text('example');

修改如果要向元素添加大量项目，该怎么办？你应该先做一个很长的string并在循环之后追加它吗？

Answer 1

您最快的方式是创建要作为字符串附加的整个DOM，然后将其作为html()附加到文档中：

var dom = '<a href="http://www.example.com" class="footerLink" rel="external">example</a>';
$(element).html(dom);

在您的示例中，您所拥有的三个中最快的应该是第三个，因为它不需要执行任何复杂的字符串解析，并且不使用链式函数调用放置属性，而是作为单个提供object作为选择器的参数。

There is a forum thread on jQuery you may want to check out.

<强>更新

如果要为元素创建大量项目，那么您一定要采用字符串方法。看看以下制作1000个列表元素的示例。

// Assume we have data defined with 1000 data members
// each containing a text property
var list = [];
for (var i = 0; i < data.length; i++) {
    list.push('<li>' + data.text + '</li>');
}
$(ul).html(list.join(''));

Answer 2

正如康斯坦丁所解释的那样，字符串方法在性能方面更好。但是，我想指出，如果在编写代码时不知道DOM字符串（例如文本来自用户输入），那么较慢的方法将有意义：

避免长串字符串连接
给jquery的"text"方法一个机会在输出之前清理字符串

最后，这可能真的是模板框架（小胡子或其他人......）的工作。

在jQuery中创建DOM元素之间的区别

2 个答案: