创建div的不同方法[重复]答案

【问题标题】：Different ways of creating a div [duplicate]创建div的不同方法[重复]
【发布时间】：2015-10-11 00:27:38
【问题描述】：

新 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)
;

【问题讨论】：

没有明显差异。第二个更干净。
我猜第二个会稍微快一些，因为它只执行一个函数，然后遍历所有值，但差异可以忽略不计。
@somethinghere jQuery 在后台调用了相应的函数。
@Vohuman 所以相反？例如，各个函数会更快，因为您不将它们包装到 另一个 global-er 函数中？
@somethinghere 好吧，我不确定。我的意思是最终执行了这些方法。应该测试那些 sn-ps 的性能。暂时不可用的jsperf.com 对这些情况很有用。

标签： javascript jquery html

【解决方案1】：

第二个例子会比第一个更快。

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

在第二种方法的情况下，它遍历属性集合以创建 dom 元素以及这些属性和类。

【讨论】：

这并不完全正确，声称第二个 sn-p 更快只是一种猜测。 jQuery 检查每个方法的存在（当传递一个对象时），所以这是一个开销。
关于 SO 的其他答案确实指出它们比第一个更快。将分享相关链接
我并不是说第一个更快，因为我没有测试过 sn-ps。

【解决方案2】：

我认为不同的方式在性能上是不同的，从完美的答案中不能完全确定

我正在使用纯 JavaScript

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

【讨论】：