<div class="replace" data-id="007" data-custom="">
     變換元素 div -> p 並保持所有屬性
<div>
.replace {
     padding: 1rem;
     background: #4b829e;
     border-radius: 0.5rem;
     color: white;
     float: left;
     cursor: pointer;
}
$(function (){
     $("body").on("click", ".replace", function (){
          $(this).replaceWith(function (){
               $ele = $("<p>", {
                    html: $(this).html()
               })
               
               $.each(this.attributes, function (key, attribute){
                    $ele.attr(attribute.name, attribute.value)
               })
               
               return $ele
          })
     })
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js