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

Question

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

Munford

this helped me! I was trying to change the text of a label dynamically using jquery and this thread definitely helped me. Thanks! – Smatter

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.

Aldos

Nice explanation! – Sallysallyann

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

Imitable

+1 very useful to have it written down that replaceWith() does not actually delete the element. I had not figured this out! – Lp

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

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. :) – Lp

Thanks for the note, replaceWith() returning the old element just gave me some debugging frustration :( – Magneto

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 – Florous

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(). – Cultigen

Do you recommend to use replaceWith for replacing contents with ajax call? Specially in case when performance matters? – Denison

this helped me! I was trying to change the text of a label dynamically using jquery and this thread definitely helped me. Thanks! – Smatter

Answer 3

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>

Upanishad

Answer 4

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!)

Kerge

That's why you should not use center anymore. :p – Behring

Answer 5

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

Arty