jQuery 的 replaceWith() 和 html() 有什么区别？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/730916/
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's the difference between jQuery's replaceWith() and html()?
提问by DMCS
What's the difference between jQuery's replaceWith() and html() functions when HTML is being passed in as the parameter?
当 HTML 作为参数传入时，jQuery 的 replaceWith() 和 html() 函数有什么区别？
回答by Paolo Bergantino
Take this HTML code:
拿这个 HTML 代码：
<div id="mydiv">Hello World</div>
Doing:
正在做：
$('#mydiv').html('Aloha World');
Will result in:
会导致：
<div id="mydiv">Aloha World</div>
Doing:
正在做：
$('#mydiv').replaceWith('Aloha World');
Will result in:
会导致：
Aloha World
So html()replaces the contents of the element, while replaceWith()replaces the actual element.
所以html()替换元素的内容，而replaceWith()替换实际元素。
回答by cgp
replaceWith() will replace the current element, whereas html() simply replaces the contents.
replaceWith() 将替换当前元素，而 html() 只是替换内容。
Note that the replaceWith() will not actually delete the element but simply remove it from the DOM and return it to you in the collection.
请注意，replaceWith() 实际上不会删除该元素，而只是将其从 DOM 中删除并在集合中返回给您。
An example for Peter: http://jsbin.com/ofirip/2
彼得的一个例子：http: //jsbin.com/ofirip/2
回答by Harsha
There are two ways of using html() and replaceWith() Jquery functions.
有两种使用 html() 和 replaceWith() Jquery 函数的方法。
<div id="test_id">
<p>My Content</p>
</div>
1.) html() vs replaceWith()
1.) html() 与 replaceWith()
var html = $('#test_id p').html();will return the "My Content"
var html = $('#test_id p').html();将返回“我的内容”
But the
var replaceWith = $('#test_id p').replaceWith();will return the whole DOM object of
<p>My Content</p>.
但是
var replaceWith = $('#test_id p').replaceWith();将返回 的整个 DOM 对象
<p>My Content</p>。
2.) html('value') vs replaceWith('value')
2.) html('value') 与 replaceWith('value')
$('#test_id p').html('<h1>H1 content</h1>');will give you the following out put.
$('#test_id p').html('<h1>H1 content</h1>');会给你以下输出。
<div id="test_id">
<p><h1>H1 content</h1></p>
</div>
But the
$('#test_id p').replaceWith('<h1>H1 content</h1>');will give you the following out put.
但
$('#test_id p').replaceWith('<h1>H1 content</h1>');会给你以下输出。
<div id="test_id">
<h1>H1 content</h1>
</div>
回答by mistajolly
It may also be useful to know that .empty().append()can also be used instead of .html(). In the benchmark shown below this is faster but only if you need to call this function many times.
知道.empty().append()也可以用来代替.html(). 在下面显示的基准测试中，这更快，但前提是您需要多次调用此函数。
回答by Benjamin Wootton
Old question but this may help someone.
老问题，但这可能对某人有所帮助。
There are some differences in how these functions operate in Internet Explorer and Chrome / Firefox IF your HTML is not valid.
如果您的 HTML 无效，这些功能在 Internet Explorer 和 Chrome / Firefox 中的运行方式存在一些差异。
Clean up your HTML and they'll work as documented.
清理您的 HTML，它们将按照文档工作。
(Not closing my </center>cost me my evening!)
（不关闭我的</center>成本我的晚上！）
