How to replace an element with another one?

Question

I have this HTML structure:

<div>something</div>
<p>this is a paragraph</p>

Now I want to replace that <p> with <span>. Something like this;

<div>something</div>
<span>this is a span</span>

---

I want something like this:

$("div").siblings("p"). /* replace with "<span>this is a span</span>" */

---

Note: There isn't any wrapper around that <p>. So I cannot use .html().

---

Well, doing that is possible?

Answer 1

Considering given html, you can do it this way:

$("div").next("p").replaceWith('<span>This is a span</span>'); 

Answer 2

The jQuery .replaceWith() method removes content from the DOM and inserts new content in its place with a single call. Consider this DOM structure:

<div class="container">
  <div class="inner first">Hello</div>
  <div class="inner second">And</div>
  <div class="inner third">Goodbye</div>
</div>

The second inner <div> could be replaced with the specified HTML:

$( "div.second" ).replaceWith( "<h2>New heading</h2>" );

This results in the structure:

<div class="container">
  <div class="inner first">Hello</div>
  <h2>New heading</h2>
  <div class="inner third">Goodbye</div>
</div>

See http://api.jquery.com/replacewith/

Answer 3

You can use this:

$('p').replaceWith(function(){
    return $("<span />", {html: $(this).html()});
});

See fiddle: http://jsfiddle.net/DIRTY_SMITH/k2swf/592/