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.

Answer 1

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>