Question

我从一位必须处理其他事情的同事那里继承了一些项目工作，我看到很多JQuery看起来做同样的事情，但是以两种不同的方式，使用{ {1}}和.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); }); }会将HTML标记在字段的末尾，.append()会替换指定的整个字段，但在其使用中，性能没有差异，是被调用一次以显示辅助信息并在其他地方被调用时隐藏的函数。

因此，为了清理并使其更加美观和统一，我必须要问： .html() 和 {{之间是否存在任何性能差异1}} ？我有理由选择其中一个吗？

Answer 1

这取决于你想做什么。 .append()在元素的末尾包含一些html，.html()将整个html替换为您发送给它的内容。例如：

使用.append()

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

结果：

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

使用.html()

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

结果：

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

但是，如果您要将一些特定内容插入空元素，我建议您使用.html()。这就像使用document.getElementById('content').innerHTML = "<p>Secondary content</p>"。我认为如果你使用的方法已经在Javascript语言中做了一些事情，那么它可能会更快。相反，.append()使用document.getElementById('content').innerHTML = document.getElementById('content').innerHTML + "<p>Secondary content</p>"。

您可以在JQuery文档中搜索有关该内容的更多信息。

Answer 2

.append()和.html()执行两项不同的操作。第一个，顾名思义，附加内容，因此您可以在必要时添加更多内容。如果是.html()，它将替换元素的全部内容。

在性能方面，它也取决于。这两个示例具有相似的性能，但附加is slightly quicker：

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

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

对于字符串作为输入，html()具有可比性或更快。

但是，比较两者是毫无意义的，因为它们实现了不同的目标。

Answer 3

虽然这种比较值得商榷;他们每个人都是出于自己的特定目的。仍有jsperf append vs html报告显示 append（）比html（）慢的事实。

关于jsperf的一些背景知识; jsperf事实上是衡量许多JS专家的Javascript性能的。

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

3 个答案: