157

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

BinaryButterfly
  • 18,137
  • 13
  • 50
  • 91
DMCS
  • 31,720
  • 14
  • 71
  • 104
  • 2
    this helped me! I was trying to change the text of a label dynamically using jquery and this thread definitely helped me. Thanks! – HereToLearn_ Sep 15 '15 at 19:13

5 Answers5

311

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.

Paolo Bergantino
  • 480,997
  • 81
  • 517
  • 436
38

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

cgp
  • 41,026
  • 12
  • 101
  • 131
  • 4
    +1 very useful to have it written down that replaceWith() does not actually delete the element. I had not figured this out! – Peter Feb 20 '12 at 03:11
  • 2
    It's true, it still exists. It's not in the DOM, so you won't see it, but it's still a valid piece of HTML. Proof: http://jsbin.com/ofirip/2 – cgp Feb 20 '12 at 03:36
  • 1
    yes, this is true. thanks for putting the example up. I was thinking of removing it from the DOM (plus garbage collection) as essentially deletion from my point-of-view. But you're technically correct. I'll remove the `-1` and hopefully this will be helpful for all. :) – Peter Feb 20 '12 at 03:46
  • 1
    Thanks for the note, replaceWith() returning the old element just gave me some debugging frustration :( – dain Jun 28 '12 at 15:30
  • 4
    Yeah, I've been fighting this for at least half an hour now, I just realized that the function returns the replaced element, I was expecting it to return the new one with code like this: `var $form = $target.closest('tr').replaceWith(html)` It turns out `$form` contains the element before replacement. *sigh* – Pawel Krakowiak Jul 03 '12 at 11:34
  • I ran into the same issue when chaining methods. `$('.pagination').replaceWith(new_pagination).hide();` was actually hiding the returned element, not the new one that I replaced it with. So instead of chaining hide(), I called it separately, right below calling replaceWith(). – DemitryT Sep 15 '12 at 19:20
  • 1
    Do you recommend to use replaceWith for replacing contents with ajax call? Specially in case when performance matters? – Dharmik Bhandari Jul 15 '13 at 09:20
  • this helped me! I was trying to change the text of a label dynamically using jquery and this thread definitely helped me. Thanks! – HereToLearn_ Sep 15 '15 at 19:13
8

There are two ways of using html() and replaceWith() Jquery functions. 

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

1.) html() vs replaceWith()

var html = $('#test_id p').html(); will return the "My Content"

But the var replaceWith = $('#test_id p').replaceWith(); will return the whole DOM object of <p>My Content</p>.

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

$('#test_id p').html('<h1>H1 content</h1>'); will give you the following out put.

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

<div id="test_id">
      <h1>H1 content</h1>
</div>
Harsha
  • 818
  • 11
  • 10
2

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.

See: https://jsperf.com/jquery-html-vs-empty-append-test

mistajolly
  • 441
  • 4
  • 5
2

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 </center> cost me my evening!)

Benjamin Wootton
  • 2,089
  • 20
  • 21