.empty（）。append（）和.html（）之间有什么区别？

Question

使用jQuery，使用之间的性能差异是什么：

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

和

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

Answer 1

$('#somDiv').html(value)相当于$('#somDiv').empty().append(value)。

来源：jQuery source。

Answer 2

.html将覆盖DIV的内容。

.append将添加到DIV的内容。

Answer 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()是否删除旧的.append()。这是jQuery中.html()和{{1}}之间的主要区别。

Answer 4

简单来说：

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

的工作原理如下：

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

成为：

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

而且innerHTML取代了内容，因此它变为：

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

Answer 5

正确的语法是

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

Answer 6

理解jQuery中提供的扩展的含义和功能。

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

- 上面的代码将首先清除div id标记内容，然后将文本附加到目标div：

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

- 上面的代码用html文本替换div标签文本：