Javascript 附加html的不同方式？

我只是想知道在jquery中添加html的方法之间的区别。 两者都会做同样的事，对吗

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

$（'body'）。追加（$（“”）；

及

var div=$（“”）；
变量img=$（“
以下哪种是最佳做法？
我更喜欢第二种做法，因为第一种做法可能会导致很长的行，如果需要将事件绑定到某些元素，您已经有一个变量指向它。
第二种做法更好。因为您经常看到人们这样做：

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

var alt='这是“包含双引号的标题'；
$（'body'）。追加（$（''）；

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

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

var alt='这是“包含双引号的标题'；
var div=$（''）；
变量img=$（'

更新：

我说第二种方法没有什么好担心的，这太草率了。正如其他人已经指出的那样，您必须担心性能。
通常我会说DOM脚本是更好的选择（第二种方法）；与插入大量准备为字符串的HTML相比，它更结构化，更容易捕获问题

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

此外，无论采用何种方式，插入的次数越少，强制浏览器重新绘制/刷新的次数就越少。同样，这些都需要浏览器注意，因此越少越好。
另请参见第页的


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

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

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

var div=$（“”）；
var img=$（“我认为您最好使用模板库来插入对象。下面是一个这样的库的示例：

这些库是为提高性能和减轻解析HTML blob的负担而构建的。
添加HTML内容字符串的速度大约快10倍

而不是使用第二种方法

这里有一个
第二种方法看起来更好，出错的机会也更小。但从性能上看，第二种方法更慢。所以，若您要做大量的
追加
，我建议您使用第一种方法，尽管要小心

下面是一个比较这两种方法的小测试用例
您不需要编写
append（$…）
，您可以只使用普通字符串。第二个方法也会断开。@Christoph，哦，不，当然不会断开。第二个方法正确地编码了值。您试过了吗？因为我试过了。要我提供一把小提琴吗？好了。断开：不断开：我试过小提琴，它断开了。另外，我主要关心的不是引号但是插入的结构和性能。你的提琴肯定有一些问题。我的。我喜欢编码位，这很好。其中一个是设计为一个接一个地多次调用的。你应该仔细阅读这篇文章：这一因素只适用于在构建大型html字符串时重复调用append.通常，你不必担心是1毫秒还是3毫秒。
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);

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