2

我只是想知道在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);

最佳实践是什么？

4

7 回答 7

2

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

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

更新：

我说你不用担心第二种方法太仓促了。正如其他人已经指出的那样，您必须担心性能。

于 2012-07-27T10:32:07.893 回答
2

第二种方法看起来更好，出错的可能性更小。但在性能方面，第二种方法较慢。因此，如果您要做很​​多事情appending，我建议您使用第一种情况-尽管要小心。

这是JS-Perf 上比较两种方法的一个小测试用例

于 2012-07-27T10:35:36.160 回答
1

通常我会说 DOM 脚本是更好的选择（第二种方法）；与插入大量准备为字符串的 HTML 相比，它更有条理，也更容易发现问题。

也就是说，存在性能问题。通过 DOM 脚本插入大量元素，尤其是在循环中，可能会导致显着减慢，并且在某些情况下以字符串形式插入会更快。

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

于 2012-07-27T10:33:27.073 回答
1

另请参阅我关于何时使用基于 DOM 的生成与使用字符串/innerHTML/JQuery 生成 DOM 内容的回答？

不同之处在于您有两个变量指向 jQuery 实例。您可能需要它们来添加事件监听器或稍后在代码中操作它们。

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

因此，通常首选第二种方法。您还可以嵌套附加过程以使结构清晰（好的，在此示例中，单行也是清晰的）：

var div = $("<div>");
var img = $("<img>", {"src":"somesource", "alt":"something"});
$('body').append(
  div.append(
    img
  )
);
于 2012-07-27T10:34:01.737 回答
1

我相信你最好使用模板库来插入对象。一个这样的库的例子在这里：http ://api.jquery.com/category/plugins/templates/

这些库是为提高性能而构建的，并减轻了解析 HTML blob 的负担。

于 2012-07-27T10:34:15.877 回答
1

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

比使用第二种方法

这是一个参考

于 2012-07-27T10:34:44.553 回答
0

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

于 2012-07-27T10:32:06.237 回答