JSFiddle - React, Tailwind, and code Playground

HTML

<button>change</button>
<h3 class="bordered">some title</h3>

CSS

h3 {background-color: rosybrown; color: white;}
span {background-color: bisque; color: black;}
.bordered {padding: 10px; margin: 10px; border: 2px dotted green}

JavaScript

(function($){
	var $newTag = null;
	$.fn.tagName = function(newTag){
		this.each(function(i, el){
			var $el = $(el);
			$newTag = $("<" + newTag + ">");
            
			// attributes
			$.each(el.attributes, function(i, attribute){
                console.log(attribute);
				$newTag.attr(attribute.nodeName, attribute.nodeValue);
			});
			// content
			$newTag.html($el.html());
			
			$el.replaceWith($newTag);
		});
		return $newTag;
	};
})(jQuery);

$("button").click(function(){
    $("h3").tagName("span").append(" changed to span");
});