创建新的DOM元素的最佳方法

Question

使用jQuery创建DOM元素是更好的方式，像这样：

function create(options)
{
     $('<form action="' + options.action + '"></form>');    
}

或者像这样：

function create(options)
{
     $form = $('<form></form>');
     $form.attr('action',options.action); 
}

这可能是一个观点问题。我认为第二种方式更清晰，但我怀疑它的效率会比较低...

- rgvcorley

---

这被称为微观优化，也被称为“万恶之源”。 - JJJ

@Juhana：你在考虑过早优化。我不知道询问DOM元素构建方法为什么会被视为过早甚至微小的优化。从问题中可以看出，"我感觉第二种方法更清晰..." - user1106925

“...但我怀疑它的效率不高。”我认为可以肯定地说，他提出这个问题并不是因为他已经确定这个问题是代码性能瓶颈。 - JJJ

他问的是两种方案中概念上哪一个更好，并将清晰度作为一个因素。不，代码可能不是瓶颈，这意味着性能并不是他最关心的问题，这也意味着这个问题并不完全是关于优化的。话虽如此，并不是所有优化都是“邪恶的”。如果你能获得即使微小的优化，而不掩盖代码的含义，为什么不去做呢？ 过早 优化的“邪恶”来自于引入不必要的漏洞，或因微小收益而掩盖代码的含义。显然，这里不存在这样的问题。 - user1106925

第一段代码容易受到HTML注入攻击。 - Oriol

Answer 1

点击这里可以自行查看。

注意：数字越高表示效果越好，(OPS/Sec = operations per second = 每秒代码执行次数)

测试结果表明，在Opera之外的所有浏览器中，获胜者都是同一个。

var form = document.createElement("form"),
    $form = $(form);
form.action = options.action;

---

注意：

如果您不需要一个 jQuery 对象，使用本地方法将更快：

var form = document.createElement("form");
form.action = options.action;

- Andreas Louv

---

如果对性能和清晰度有任何疑虑，这将同时解决两个问题。+1 - user1106925

+1 我不知道 jsperf.com - 非常好，感谢介绍！ - rgvcorley

+1 for jsPerf 并建议不使用 jQuery。人们倾向于使用 jQuery 做所有事情，他们应该知道何时使用更好或不使用。 - Lennon

Answer 2

jQuery可以通过以下代码创建对象

$form = $('<form>', {action: 'my action'});

class 是IE浏览器中的保留字，需要加引号。查看完整的保留字列表：Javascript中的保留关键字

- komelgman

---

我个人认为IE8已经过时了 :D - Rory McCrossan

[$('<element>') vs $('<element></element>')]（https://dev59.com/fnVC5IYBdhLWcg3whRcw） - komelgman

@RoryMcCrossan：如果您不包括属性或内容，则不需要闭合标签。无论您使用$('<form>')，$('<form/>')还是$('<form></form>')，jQuery都将使用document.createElement()。 - user1106925

完美 - 这种方法在@AndreasAL的基准测试中表现非常出色，而且很好和清晰。谢谢！ - rgvcorley

更新：attr类必须加引号（IE中的错误） === IE中的保留字 - Andreas Louv

Answer 3

我总是选择第二个。

function create(options)
{
     $form = $('<form></form>');
     $form.attr('action',options.action); 
}

我更喜欢这种方法，因为它更易读。

- Dave Becker

Answer 4

优化永远是好的，但有时候会适得其反。您可以使用纯JS来实现：

function create(options)
{
  var newform = document.createElement('form');

  newform.setAttribute('action',options.action);
}

除了上面提到的可以忽略不计之外，其他都以更易于阅读的方式呈现...即选项2

- Thierry Blais

Answer 5

除非您多次运行此函数，否则性能差异将是微不足道的。因此，我总是选择最清晰、最易于更新的解决方案（即第二个）。

- lamplightdev

---

@NateBarbettini听起来很像一个答案，不是吗？ - Anders

Answer 6

对于 jQuery 的实际底层代码不确定，也无法判断哪个版本性能更好。

无论如何，我可以想象，在第一种情况下，jQuery 仍然会解析属性并给它们设置值，所以性能差别应该不大。

因此，如果包含大量 HTML 代码，我认为第一个解决方案更方便；否则，我会选择第二个。

- kingpin