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

Question

当HTML作为参数传入时,jQuery的replaceWith()和html()函数有什么区别？

Answer 1

Take this HTML code:

<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.

Answer 2

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: http://jsbin.com/ofirip/2

Answer 3

有两种使用 html() 和 replaceWith() Jquery 函数的方法。

<div id="test_id">
   <p>My Content</p>
</div>

1.) html() 与 replaceWith()

var html = $('#test_id p').html(); 将返回“我的内容”

但是 var replaceWith = $('#test_id p').replaceWith();将返回 的整个 DOM 对象 <p>My Content</p>。

2.) html('value') 与 replaceWith('value')

$('#test_id p').html('<h1>H1 content</h1>'); 会给你以下输出。

<div id="test_id">
  <p><h1>H1 content</h1></p>
</div>

但 $('#test_id p').replaceWith('<h1>H1 content</h1>');会给你以下输出。

<div id="test_id">
      <h1>H1 content</h1>
</div>