How do you replace an HTML tag with another tag in jquery?

Question

I have a site I'm working on and it uses 'aside' tags, which I'm not getting IE8 to be able to read no matter what I try, even with an HTML5 Shiv. So, I'm wondering, how would you replace existing tags with other tags with jQuery?

For example, if I wanted to change

<aside>
  <h3></h3>
</aside>

to

<div>
  <h3></h3>
</div>

How would that be done?

Answer 1

Try this:

$('aside').contents().unwrap().wrap('<div/>');

• Get the contents of aside first.
• Now unwrap the contents.
• Now simply, wrap the contents inside a new tag, here a div.

DEMO

---

Also, you can do this using .replaceWith() method like:

$('aside').replaceWith(function () {
    return $('<div/>', {
        html: $(this).html()
    });
});

DEMO

Answer 2

$('aside').replaceWith('<div><h3></h3></div>');