blocks|key|1586297|text|replaceWith()将替换当前元素，而html()只是替换内容。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1586298|请注意，replaceWith()实际上不会删除该元素，而只是将其从DOM中删除并在集合中返回给您。|1586299|彼得的一个例子：http://jsbin.com/ofirip/2|offset|length|1586300|entityMap|0|LINK|mutability|MUTABLE|url|http://jsbin.com/ofirip/2^0|0|0|8|P|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@$F|S|G|T|1|U]]|A|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]]]

replaceWith() will replace the current element, whereas html() simply replaces the contents.

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.

An example for Peter: <a href="http://jsbin.com/ofirip/2" rel="noreferrer">http://jsbin.com/ofirip/2</a>

blocks|key|1586368|text|使用下面的HTML代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1586369|<div+id="mydiv">Hello+World</div>|code-block|syntax|javascript|1586370|正在做什么：|1586371|$('#mydiv').html('Aloha+World');|1586372|将导致：|1586373|<div+id="mydiv">Aloha+World</div>|1586374|1586375|$('#mydiv').replaceWith('Aloha+World');|1586376|1586377|Aloha+World|1586378|所以html()替换了元素的内容，而replaceWith()替换了实际的元素。|offset|length|1586379|entityMap|0|LINK|mutability|MUTABLE|url|http://docs.jquery.com/Attributes/html#val|1|http://docs.jquery.com/Manipulation/replaceWith^0|0|0|0|0|0|0|0|0|0|0|2|6|0|I|D|1|0^^$0|@$1|2|3|4|5|6|7|18|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|19|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|1A|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|1B|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|1C|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|1D|8|@]|9|@]|A|$E|F]]|$1|O|3|H|5|6|7|1E|8|@]|9|@]|A|$]]|$1|P|3|Q|5|D|7|1F|8|@]|9|@]|A|$E|F]]|$1|R|3|L|5|6|7|1G|8|@]|9|@]|A|$]]|$1|S|3|T|5|D|7|1H|8|@]|9|@]|A|$E|F]]|$1|U|3|V|5|6|7|1I|8|@]|9|@$W|1J|X|1K|1|1L]|$W|1M|X|1N|1|1O]]|A|$]]|$1|Y|3|-4|5|6|7|1P|8|@]|9|@]|A|$]]]|Z|$10|$5|11|12|13|A|$14|15]]|16|$5|11|12|13|A|$14|17]]]]

Take this HTML code:

<pre><code>&lt;div id="mydiv"&gt;Hello World&lt;/div&gt;
</code></pre>

Doing:

<pre><code>$('#mydiv').html('Aloha World');
</code></pre>

Will result in:

<pre><code>&lt;div id="mydiv"&gt;Aloha World&lt;/div&gt;
</code></pre>

Doing:

<pre><code>$('#mydiv').replaceWith('Aloha World');
</code></pre>

Will result in:

<pre><code>Aloha World
</code></pre>

So <a href="http://docs.jquery.com/Attributes/html#val" rel="noreferrer">html()</a> replaces the contents of the element, while <a href="http://docs.jquery.com/Manipulation/replaceWith" rel="noreferrer">replaceWith()</a> replaces the actual element.

blocks|key|1586422|text|这是一个老问题，但这可能会对某些人有所帮助。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1586423|如果您的HTML无效，这些函数在Internet+Explorer和Chrome+/+Firefox中的操作方式会有所不同。|1586424|清理一下你的HTML，它们就会像文档中描述的那样工作。|1586425|(没有关闭我的</center>花了我一个晚上的时间！)|offset|length|style|CODE|1586426|entityMap^0|0|0|0|7|9|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|P|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|Q|8|@$H|R|I|S|J|K]]|9|@]|A|$]]|$1|L|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|M|$]]

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. 

Clean up your HTML and they'll work as documented. 

(Not closing my <code>&lt;/center&gt;</code> cost me my evening!)

blocks|key|1586488|text|知道也可以用.empty().append()来代替.html()也是很有用的。在下面显示的基准测试中，这是更快的，但只有当您需要多次调用此函数时才会这样。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1586489|请参阅：https://jsperf.com/jquery-html-vs-empty-append-test|1586490|entityMap|0|LINK|mutability|MUTABLE|url|https://jsperf.com/jquery-html-vs-empty-append-test^0|6|H|Q|7|0|4|1F|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]|$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@$9|V|A|W|1|X]]|E|$]]|$1|H|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

It may also be useful to know that <code>.empty().append()</code> can also be used instead of <code>.html()</code>. In the benchmark shown below this is faster but only if you need to call this function many times. 

See: <a href="https://jsperf.com/jquery-html-vs-empty-append-test" rel="nofollow noreferrer">https://jsperf.com/jquery-html-vs-empty-append-test</a>

What's the difference between jQuery's replaceWith() and html() functions when HTML is being passed in as the parameter?

What's the difference between jQuery's replaceWith() and html()?

jQuery

当超文本标记语言作为参数传入时，jQuery的replaceWith()和html()函数有什么不同？

问jQuery的replaceWith()和html()有什么区别？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery的replaceWith()和html()有什么区别？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery的replaceWith()和html()有什么区别？
EN