Question

我只是想知道在jquery中添加html的方法之间的差异。两个人都会做同样的事吗？

$('body').append($("<div><img src='somesource' alt='something'></div>"));

和

var div = $("<div>");
var img = $("<img>").attr({"src" : "somesource", "alt" : "something"});
div.append(img);
$('body').append(div);

这是最好的做法？

Answer 1

第二个更好。因为你经常看到人们这样做：

var alt = 'This is " the title containing a double quote';
$('body').append($('<div><img src="somesource" alt="' + alt + '"></div>'));

然后想知道为什么吃了东西:-)。而当你使用第二个时，你完全没有什么可担心的：

var alt = 'This is " the title containing a double quote';
var div = $('<div>');
var img = $('<img>').attr({ src : 'somesource', alt : alt });
div.append(img);
$('body').append(div);

更新：

我太急于说第二种方法你没有什么可担心的。正如其他人已经指出的那样，你必须担心性能。

Answer 2

第二种方法看起来更好，错误的可能性更小。但性能方面，第二种方法较慢。所以，如果你要做很多appending，我会建议你去做第一个案例 - 尽管，小心翼翼。

这是一个比较两种方法的小测试案例up on JS-Perf

Answer 3

通常我会说DOM脚本是更好的选择（第二种方法）;它比通过插入大量准备为字符串的HTML更加结构化，更容易捕获问题。

也就是说，存在性能问题。通过DOM脚本插入元素的负载，特别是在循环中，可能会导致显着的减速，并且有时会以字符串形式插入更快。

此外，您执行的插入操作越少 - 无论采用何种方式 - 您强制浏览器进行重新绘制/刷新的次数就越少。同样，这些都需要浏览器注意，所以越少越好。

Answer 4

另见my answer

上的When do you use DOM-based Generation vs. using strings/innerHTML/JQuery to generate DOM content?

不同之处在于您有两个指向jQuery实例的变量。您可能需要它们来进行eventListener - 在代码中添加或操作它们。

此外，基于DOM的元素生成具有自动转义字符串的优势，这在设计带参数的函数时非常有用，而且用户输入绝对需要。

因此，第二种方法通常是优选的。你也可以嵌套附加过程以使结构清晰（好的，在这个例子中，单行也很清楚）：

var div = $("<div>");
var img = $("<img>", {"src":"somesource", "alt":"something"});
$('body').append(
  div.append(
    img
  )
);

Answer 5

添加一串HTML内容的速度大约快10倍

比使用第二种方法

这是reference

Answer 6

我更喜欢第二个，因为第一个可能导致非常长的行，如果你需要将事件绑定到某些元素，你已经有一个指向它的变量。

不同的方法来追加HTML？

6 个答案: