Javascript 创建div的不同方法

在如何创建新的DOM元素方面有什么显著的区别吗？使用一种方式比另一种方式有什么优点/缺点，还是归结为个人偏好？我通常使用第一种方法，直到最近才发现第二种方法

var test1 = $('div#test1'),
    test2 = $('div#test2')
;
// first way
$('<div/>')
    .addClass('mainClass subClass')
    .attr('id', 'someId2')
    .attr('data-extra', 'extraInfo')
    .text('some text')
    .appendTo(test2)
;

// second way
$('<div/>', 
  {
      'class': 'mainClass subClass',
      'id': 'someId1',
      'data-extra': 'extraInfo',
      'text': 'some text'
  })
    .appendTo(test1)
;

var test1=$（'div#test1'），
test2=$（'div#test2'）
;
//第一条路
$('')
.addClass（'mainClass子类'）
.attr（'id'，'someId2'）
.attr（'data-extra'，'extraInfo'）
.text（“某些文本”）
.appendTo（test2）
;
//第二条路
$('', 
{
“类”：“mainClass子类”，
'id'：'someId1'，
“额外数据”：“额外信息”，
“文本”：“一些文本”
})
.appendTo（test1）
;

第二个示例比第一个示例更快。

如果是第一次。对象被创建并返回。然后使用jquery方法，每次获取元素的jquery对象并设置新的类/属性

---

在第二种方法中，它迭代属性集合以创建dom元素以及这些属性和类

我认为不同的方法在性能上是不同的，所以不能完全确定答案是否完美

我使用的是纯javascript

var element = document.createElement("div");
var elementContent = document.createTextNode("My div");
element.appendChild(elementContent);
// add div to body
document.body.appendChild(element);

---

没有明显的区别。第二个更干净。我想第二个会稍微快一点，因为它只执行一个函数，然后在所有值上循环，但差别可以忽略不计。@somethingherejquery在幕后调用相应的函数。@Vohuman，那么它是相反的吗？就像在中一样，单个函数会更快，因为您没有将它们包装到另一个全局er函数中？@这里有些东西好吧，我不确定。我的意思是这些方法最终被执行。应该测试这些代码片段的性能。暂时不可用对于这些情况很有用。这并不完全正确，声称第二个代码片段更快只是猜测。jQuery检查每个方法的存在性（当传递一个对象时），因此这是一个开销。关于so do的其他答案指出它们比第一个更快。将共享相关链接我并不是说第一个更快，因为我还没有测试代码片段。