Replace tag with
using jQuery

Question

I have the following code:

<div class="normal">
    <div>
        <div>~Content 1~</div>
    </div>
</div>

<div class="normal replace">
    <a href="#">
        <div>~Content 2~</div>
    </a>
</div>

Using jQuery, I want to replace the <a> tag inside <div class="normal replace"> with normal <div> tag while keeping it's content.

<div class="normal replace">
    <div="result">
        <div>~Content 2~</div>
    </div>
</div>

Please write
in the right format. I think you forgot to mention id or class. — vinothini, May 08 '13 at 11:12
@vinothini This is clearly an example, does that really matter! ;-) — Ben Carey, May 08 '13 at 11:13
@Zenith unfortunately, there are only solutions for changing div's content, not replacing the div while keeping it's content. — Stanislav Kirilov, May 08 '13 at 11:26

score 15 · Accepted Answer · answered May 08 '13 at 11:09

15

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

http://jsfiddle.net/VMxAL/

answered May 08 '13 at 11:09

Ram

143,282
16
168
197

What's exactly are you returning? I don't understand the structure of what you're returning. – Gal Grünfeld Feb 24 '18 at 13:31

Ben Carey · Answer 2 · 2013-05-08T11:18:55.330

5

Try something like this:

// Select the 'a' tag to be replaced and call the replaceWith method
$('.normal a').replaceWith(function(){
    // Execute a callback to generate contents of the replacement
    // The $('<div>') part creates a div
    return $('<div>', {
        html: this.innerHTML // This takes the html of the 'a' tag and copies it to the new div
    });
});

The jQuery replaceWith method takes the the item and replaces it with what is returned by the callback function.

See here for more information

edited May 08 '13 at 11:18

answered May 08 '13 at 11:11

Ben Carey

16,540
19
87
169

Should the return be `return $('
` or `return $('
'` ?
– Craig London Mar 15 '17 at 20:56

score 2 · Answer 3 · edited May 23 '17 at 11:33

2

here you go orignally take from here Using jQuery to replace one tag with another

$('div.normal a').contents().unwrap().wrap('<div id='result'/>');

edited May 23 '17 at 11:33

Community

1
1

answered May 08 '13 at 11:09

The Mechanic

2,301
1
26
37

score 2 · Answer 4 · answered May 08 '13 at 11:10

2

Try this -

$('div.normal.replace a').find('div').unwrap().wrap("<div id='result'/>");

answered May 08 '13 at 11:10

Adil Shaikh

44,509
17
89
111

score 0 · Answer 5 · answered May 08 '13 at 11:17

0

Use the following $('div.normal.replace a').replaceWith( "" + $('div.normal.replace a').html() + "" );

answered May 08 '13 at 11:17

Swati Sachdeva

253
2
11

score 0 · Answer 6 · answered May 08 '13 at 11:19

0

Please click on the jsfiddle example i tried for you below.

Click here for JS Fiddle example

Hope that helps.

answered May 08 '13 at 11:19

sanman

57
3

Replace tag with using jQuery

6 Answers6

Replace tag with
using jQuery