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?

`document.createElement('aside')` should allow you to work with the aside tag in IE8. You are using the html5 doctype, right? — Kevin B, Apr 29 '13 at 18:39
I was trying to style the 'aside', but since IE8 won't recognize it, even with document.createElement('aside'), it wasn't reading any of my CSS. — Paul L, Apr 29 '13 at 18:43
Ah, i see what's happening. IE8 is incorrectly closing the opening aside immediately, for example `
foo
` is becoming `
foo`, because of this, the replacement will probably be a little bit harder. — Kevin B, Apr 29 '13 at 18:48
Duplicate question answer : http://stackoverflow.com/a/9468280/7602 I like the linked not-selected answer better. — tomdemuyt, Apr 29 '13 at 18:40

palaѕн · Accepted Answer · 2015-08-02T10:00:25.037

32

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

edited Aug 02 '15 at 10:00

answered Apr 29 '13 at 18:38

palaѕн

72,112
17
116
136

1

This will incorrectly create superflous `div` due to text nodes (whitespaces) being included when using `.contents`, see http://tinker.io/493db/1 – Nelson Apr 29 '13 at 18:45
I'm getting very different results when i try this in IE8: http://jsfiddle.net/JpzhL/2/embedded/result/ – Kevin B Apr 29 '13 at 18:52
How can we apply the attributes of old tag to the new tag? Let's say I have `
Slide 1
` HTML markup, how can I change this to `` using jQuery. – Vikas Khunteta Aug 02 '15 at 07:37
2

@VikasKhunteta: You can try this: http://jsfiddle.net/ed6wyed4/ Please let me know if you need any further help. – palaѕн Aug 02 '15 at 09:43

score 6 · Answer 2 · answered Apr 29 '13 at 18:43

6

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

answered Apr 29 '13 at 18:43

Memolition

492
1
5
12

score 3 · Answer 3 · answered Jan 09 '15 at 13:21

This works for every element in the document and it preserves the contents. Using wraps leads to occurrences of many div elements if there are line breaks in the contents of the aside element.

$('aside').each(function() { $(this).replaceWith("<div>"+$(this).html()+"</div>") });

score 1 · Answer 4 · answered Aug 06 '14 at 08:11

1

This will do the job:

 $('aside').replaceWith( "<div>" + $('aside').html() + "</div>" );

Also using the .html() gives a more dynamic approach.

answered Aug 06 '14 at 08:11

alokrajiv

1,038
1
8
7

score 1 · Answer 5 · answered Mar 12 '16 at 14:54

Here's a solution that replaces HTML5 block tags, preserving the styling on the divs that replace the HTML5 tags. Simply replacing tags leaves the attributes behind.

$('article, aside, figcaption, figure, footer, header, nav, section, source')
    .each(function(){
        var el = $(this),
            html = el.html(),
            attrs = {
                "id": el.attr('id'),
                "classes": el.attr('class'),
                "styles": el.attr('style')
            };

        console.log('Replacing ' + el.prop('tagName') + ', classes: ' + attrs.classes);
        el.replaceWith($('<div></div>').html(html).attr(attrs));
    });

(may need a little more work on the source tag, which has "src" and "type" attributes)

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

5 Answers5

Linked