Javascript .empty().append() 和 .html() 有什么区别？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1903063/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is the difference between .empty().append() and .html()?
提问by AppleTrue
Using jQuery, what's the performance difference between using:
使用jQuery，使用之间的性能差异是什么：
$('#somDiv').empty().append('text To Insert')
and
和
$('#somDiv').html('text To Insert')
?
?
回答by Roatin Marth
$('#somDiv').html(value)is equivalent to $('#somDiv').empty().append(value).
$('#somDiv').html(value)相当于$('#somDiv').empty().append(value)。
Source: jQuery source.
来源：jQuery 源代码。
回答by Mark Sherretta
.html will overwrite the contents of the DIV.
.html 将覆盖 DIV 的内容。
.append will add to the contents of the DIV.
.append 将添加到 DIV 的内容中。
回答by Deva.TamilanbanThevar
difference between append()and html()in jQuery
jQueryappend()和html()jQuery 中的区别
.append()and .html()are the most useful methods in jQuery. But these are far different from one another, .append()add some value to the existing one. Where .html()do the same but it removes the old value first.
.append()而.html()在jQuery的最有用的方法。但这些彼此相差甚远，.append()为现有的增加一些价值。在哪里.html()做同样的事情，但它首先删除旧值。
Here is an example:
下面是一个例子：
<ul id="test">
<li>test</li>
</ul>
Now I will use .append()to add one <li>, For that I will write:
现在我将使用.append()添加一个<li>，为此我会写：
<script type="text/javascript>"
jQuery("#test").append("<li>test1</li>");
</script>
The output of this jQuery will be:
这个 jQuery 的输出将是：
<ul id="test">
<li>test</li>
<li>test1</li>
</ul>
Now if I use .html()to add one <li>, For that I will write:
现在，如果我使用.html()添加一个<li>，为此我会写：
<script type="text/javascript>"
jQuery("#test").html("<li>test1</li>");
</script>
The output of this Script will be:
此脚本的输出将是：
<ul id="test">
<li>test1</li>
</ul>
Here in this example .append()add one extra <li>, whether .html()removes the old one with new one. This is the main difference between .append()and .html()in jQuery.
在这个例子中.append()添加一个额外的<li>，是否.html()用新的删除旧的。这是jQuery.append()和.html()jQuery 中的主要区别。
回答by Rahul N P
Understand the meaning and functions of the extensions provided in jQuery.
理解jQuery中提供的扩展的含义和功能。
$('#somDiv').empty().append('text To Insert')
-- Above code will clear the div id tag content first then will append the text to the target div:
-- 上面的代码将首先清除 div id 标签内容，然后将文本附加到目标 div：
$('#somDiv').html('text To Insert')
-- Above code replace the div tag text with the html text:
-- 以上代码将 div 标签文本替换为 html 文本：
回答by EarthMind
In simple words:
简单来说：
$('#somDiv').append('blabla')
works like this:
像这样工作：
<div id='somDiv'>some text</div>
becomes:
变成：
<div id='somDiv'>some textblabla</div>
And innerHTML replaces the contents, so it becomes this:
而innerHTML替换了内容，就变成了这样：
<div id='somDiv'>blabla</div>
回答by Pete Nelson
The correct syntax is
正确的语法是
$("#somDiv").html("<span>Hello world</span>");
