How to replace a tag with another and keep attributes using jquery?

Question

How to replace <ins> tag with <del> tag and keep attributes of it in javascript or jquery? like the following

<ins data-author="auth1" data-ins-username="user1">auth1 text</ins>
<!-- After -->
<del data-author="auth1" data-ins-username="user1">auth1 text</del>

I found similar question with answer but it doesn't keep attributes.

is this changing of tag? unwrap and move is not every clear for this matter — guradio
– guradio, Commented Sep 16, 2016 at 7:19

Mohammad · Accepted Answer · 2016-09-16 09:28:23Z

5

You can use jquery .replaceWith() to replacing a tag with another. In function get outerHTML of element and replace tag name with another.

$("ins").replaceWith(function(){
    return this.outerHTML.replace("<ins", "<del").replace("</ins", "</del")
});

$("ins").replaceWith(function(){
    return this.outerHTML.replace("<ins", "<del").replace("</ins", "</del")
});
console.log($("del")[0].outerHTML);

del { color: red }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ins data-author="auth1" data-ins-username="user1">auth1 text</ins>

edited Sep 16, 2016 at 9:28

answered Sep 16, 2016 at 9:07

Mohammad

21.5k16 gold badges58 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to replace a tag with another and keep attributes using jquery?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related