.empty().append() 和 .html() 有什么区别？答案

【问题标题】：What is the difference between .empty().append() and .html()?.empty().append() 和 .html() 有什么区别？
【发布时间】：2009-12-14 19:50:47
【问题描述】：

使用jQuery，使用的性能有什么区别：

$('#somDiv').empty().append('text To Insert')

和

$('#somDiv').html('text To Insert')

?

【问题讨论】：

您继续根据答案更改您的问题。你的真正最终问题是什么？正如你所写的，没有功能上的区别。如果您关心速度，您应该在问题中提及速度。
-1 用于更改您的根本问题并使许多答案无效。
-1 支持 Stefan，因为我不在乎我是否会丢分。
有人可能会认为html() 由innerHTML 支持，而append() 由appendChild() 支持，在这种情况下，存在差异，即浏览器需要做什么和做什么在序列化/反序列化过程中，信息可能会丢失。

【解决方案1】：

$('#somDiv').html(value) 等价于$('#somDiv').empty().append(value)。

【讨论】：

.append 比 .html 快吗？
@AppleTrue：更新慢点！ ;) 我已经更新了对您最新问题的回答....
.empty().append(...) 会稍微快一些，因为.html(...) 本质上是同一事物的包装器。不要为了速度而使用.empty().append(...)，因为即使是数千次调用，您也不会注意到差异，并且会使阅读您的代码的人感到困惑。
jQuery 文档会让您相信，如果您尝试添加无法使用的现有 jQuery、元素、数组或文本 .html，因为它说它只接受 htmlString或function...但是它确实在内部调用.empty().append()并将现有的jQuery传递给它。

【解决方案2】：

.html 将覆盖 DIV 的内容。

.append 将添加到 DIV 的内容。

【讨论】：

【解决方案3】：

jQuery 中 append() 和 html() 的区别

.append() 和 .html() 是 jQuery 中最有用的方法。但它们彼此相差甚远，.append() 为现有的增加了一些价值。 .html() 做同样的事情，但它首先删除旧值。

这是一个例子：

<ul id="test">
<li>test</li>
</ul>

现在我将使用.append() 来添加一个<li>，为此我会写：

<script type="text/javascript>"
jQuery("#test").append("<li>test1</li>");
</script>

这个 jQuery 的输出将是：

<ul id="test">
<li>test</li>
<li>test1</li>
</ul>

现在如果我用.html() 加一个<li>，我会写：

<script type="text/javascript>"
jQuery("#test").html("<li>test1</li>");
</script>

此脚本的输出将是：

<ul id="test">
<li>test1</li>
</ul>

在此示例中，.append() 添加一个额外的<li>，.html() 是否用新的删除旧的。这是 jQuery 中 .append() 和 .html() 的主要区别。

【讨论】：

【解决方案4】：

简单来说：

$('#somDiv').append('blabla')

像这样工作：

<div id='somDiv'>some text</div>

变成：

<div id='somDiv'>some textblabla</div>

而innerHTML替换了内容，所以变成了这样：

<div id='somDiv'>blabla</div>

【讨论】：

【解决方案5】：

正确的语法是

$("#somDiv").html("<span>Hello world</span>");

【讨论】：