Jquery 什么'；更快，.html（）或.append（）？

我从一位同事那里继承了一些项目工作，他必须从事其他工作，我也看到很多JQuery似乎做同样的事情，但用两种不同的方式，使用

.append（）

和

.html（）

在这些示例中，我们假设目标元素为空

function foo(id, field) {
    $.get('/Project/Foo?id=' + id, function (data) {
        $(field).html(data);
    });
}

然后我看到：

function bar(id, field) {
    $.get('/Project/Bar?id=' + id, function (data) {
        $(field).append(data);
    });
}

现在我了解到，

.append（）

会将HTML附加到字段的末尾，而

.HTML（）

会替换指定的整个字段，但在使用过程中，性能没有任何差异，它们是一次调用的函数，用于显示辅助信息，在其他地方调用时隐藏

---

因此，为了清理并使其美观统一，我必须问：在

.append（）

和

.html（）

之间是否存在性能差异？有没有充分的理由让我选择一个而不是另一个呢？

这取决于你想做什么

.append（）

在元素末尾包含一些html，而

.html（）

用发送给它的内容替换整个html。例如：

使用

.append（）

结果:

<div id='content'>
     <p>Some content</p>
     <p>Secondary content</p>
</div>

<div id='content'>
     <p>Secondary content</p>
</div>

次要内容

但是，如果要在空元素中插入某些特定内容，我建议您使用

.html（）

。这就像使用

document.getElementById（'content'）.innerHTML=“次要内容”
”

。我认为，如果您使用一种已经在Javascript语言中实现的方法，它可能会更快。相反，

.append（）

类似于使用

document.getElementById（'content'）。innerHTML=document.getElementById（'content'）。innerHTML+“辅助内容
”

您可以在JQuery文档中搜索更多关于这方面的信息。

.append（）

和

.html（）

做两件不同的事情。第一个，顾名思义，是附加内容的，因此如果需要，您可以在以后添加更多内容。对于

.html（）

，它将替换元素的全部内容

就性能而言，这也取决于。这两个示例具有相似的性能，尽管：

$（“body”）.append（$（“”）；
$（“body”）.html（$（“”）；

对于作为输入的字符串，

html（）

具有可比性或更快的速度

---

然而，比较两者是没有意义的，因为它们实现了不同的目标。

尽管比较是有争议的；每一个都有其特定的目的。还有一份报告揭示了一个事实，append（）比html（）慢。

---

只是一点关于jsperf的背景知识；jsperf实际上是许多JS专家用来衡量Javascript性能的工具。

为什么不在jsperf.com上运行一些测试，看看呢？它们可以做两件完全不同的事情，除非你的

.append

前面有

.empty

或类似的东西。（你的复制粘贴失败）你的代码两次都是一样的。看，这两个例子做的事情完全不同。一个替换内容，另一个添加到内容。哪一个更快不应该成为你使用哪一个的考虑因素。一个用于做X，另一个用于做Y。我无法想象任何情况下，速度差，无论是什么，都会产生任何实际的差异。不，使用

append（）

更接近于使用。@DavidThomas:不完全是，

append（）

我真的不确定它是如何工作的，这就是为什么我说如果他想要更多的信息到jQuery文档中。我只是说这样有两个原因。第一个，因为我认为这是最容易理解的。其次，因为我不知道OP的Javascript级别有多高，所以在编写它时，首先要学习如何遍历元素。无论如何，我很感激你的建议。@MMM：因此“更接近”不是“与”相同；）@大卫托马斯：现在你已经编辑了你的评论。。。您测试的一个案例恰好是.html（）实际使用.append的一个案例，在其他案例中（

.append（“”

和

.append（“foobar
”）

）它们在速度上是相同的。@KevinB：是的，这是我的观点，您的差异取决于您所做的工作，但是这两个函数的作用不同我更想强调你的观点，

<div id='content'>
     <p>Some content</p>
</div>
................
$('#content').append('<p>Secondary content</p>');

<div id='content'>
     <p>Secondary content</p>
</div>

$("body").append($("<div>"));

$("body").html($("<div>"));