附加html的不同方式

different ways to append html?

本文关键字：方式 html 附加      更新时间：2024-03-08

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

遵循哪种最佳实践？

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

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

更新：

我过于草率地说，你对第二种方法没有什么可担心的。正如其他人已经指出的那样，你必须担心表现。

第二种方法看起来更好，出错的可能性更小。但就性能而言，第二种方法较慢。所以，若你们要做大量的appending，我建议你们使用第一种情况——尽管要小心。

下面是一个关于JS-Perf的小测试用例，比较了

这两种方法

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

也就是说，存在性能问题。通过DOM脚本插入元素负载，特别是在循环中，可能会导致显著的速度减慢，而且在某些情况下，作为字符串插入要快得多。

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

我认为您最好使用模板库来插入对象。以下是一个此类库的示例：http://api.jquery.com/category/plugins/templates/

这些库是为性能而构建的，可以减轻解析HTML Blob的负担。

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

比使用第二种方法

这里有一个参考

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

不同之处在于，有两个变量指向jQuery实例。您可能需要它们，以便eventListener在代码后期添加或操作它们。

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

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

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

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

相关文章：