jQuery向DOM添加元素：正确的方法

Question

我想知道哪种方法更好，为什么：

A）

  .append('<div class="load" id="XXX"></div>)

b）中

  .append('<div></div>').addClass('load').attr('id', 'XXX')

c）中

   your way

Answer 1

从jQuery 1.4开始，您可以将地图对象作为第二个参数传递

$('<li/>', { 
  click:    function(){}, 
  id:       'test',
  addClass: 'clickable' 
});

我发现这个方法比单个字符串或许多jQuery方法调用和链接更具可读性。

检查文档here。 IE输入元素的一些问题。

无论如何，无论是使用jQuery还是基本JavaScript，都不鼓励在字符串中创建元素及其属性。最好将属性的创建和归属分开。

我为3个jQuery方法的direct comparison创建了一个小提琴，加上一个纯JavaScript方法。

虽然新的1.4选项和通常的选项都非常快，但是字符串方法很慢。这并不奇怪，因为jQuery必须解析并解释它。

当然，纯JS总是最快的选择;）

Answer 2

这就是我通常使用jQuery处理它的方式。我发现它更具可读性，但这只是偏好。

var newdiv = $('<div></div>');

newdiv
  .addClass('load')
  .attr('id', 'XXX');

$('#someElement').append(newdiv);

Answer 3

我喜欢用老式的方式创建元素

var aDiv = document.createElement("div");
aDiv.id="blah";
aDiv.className+="meh ";
document.body.appendChild(aDiv);

虽然什么更好？不知道。

Answer 4

新的答案，我经历并更新了某人的jsPerf测试，所以它实际上会工作，似乎其他人是对的，我错了： http://jsperf.com/document-write-vs-document-createelement/4/

Answer 5

var div = $('<div class="load" id="test"></div>');
.append(div);

Answer 6

第一种方法是“最佳”，因为它最快，因为它最小化了底层DOM操作。 显然，随着元素变得越来越复杂，使用jQuery方法构建变得更加方便，并且您对“最佳”的定义可能会发生变化。

Answer 7

另一种选择（即使在我看来输入更多代码但 way 更清洁），是使用JAML。例如：

Jaml.register('new-div', function() {
  div({class:'load', id:'XXX'})
});

一旦注册，就可以非常轻松地在页面上呈现：

$("#element-to-append-to").append( Jaml.render("new-div") );

就像我说的那样，要输入的代码要多一些，但是一旦你拥有了所有这些模板，就可以非常容易地在其他地方重复使用这些模板。

Answer 8

这已成为一个意见问题，而不是一个能得到答案的实际问题，但无论如何我都会提出意见。

我更喜欢先将html构建为字符串，然后将其传递给jquery以将其转换为html。例如，

function buildDiv(obj){
  var str = [
    '<div id="',obj.id,'" class="',obj.class,'">',
      obj.content,
    '</div>'
  ].join("");
  return str;
}
$(buildDiv({
  id: "foo",
  class: "bar",
  content: "Test Content!"
}).appendTo(target);

我知道创建一个简单的div太过分了，但是当你必须创建一些东西时，例如将数组转换为有序列表，这非常有用。这与做

基本相同

$("<div id='foo' class='bar'></div>");

只有我用一个函数来生成字符串。这允许我修改函数，然后在其他地方使用相同的函数来构建需要遵循相同模板的其他字符串。

根据项目的需要，您认为“最佳”的情况可能因情况而异。

但是我会说在你追加它之前操作html要好得多（更快）。