JSFiddle - React, Tailwind, and code Playground

HTML

<b class="abc" data-test="123">Change <i>here</i>!!</b>

<b class="abc" style="color:yellow">Change <i>here</i>!!</b>

<b style="background-color:#FFA; ">NO CHANGES HERE</b>

CSS

h1 {color:blue; font-size:22pt}

JavaScript

function jsChangeElementType(element,newtype) {
    //@felix http://stackoverflow.com/a/8584158/287948
  var new_element = document.createElement(newtype),
    old_attributes = element.attributes,
    new_attributes = new_element.attributes,
    child = element.firstChild;  
  // copy attributes
  for(var i = 0, len = old_attributes.length; i < len; i++)
    new_attributes.setNamedItem(old_attributes.item(i).cloneNode());
  // copy child nodes
  do {
    new_element.appendChild(element.firstChild);
  } while(element.firstChild);
  // replace element
  element.parentNode.replaceChild(new_element, element);
}  // func

(function($) {
    $.fn.changeElementType = function(newType) {
       for (var k=0; k<this.length; k++)
        jsChangeElementType(this[k],newType);
       return this; // for chain? not working
    }
})(jQuery);

$("b.abc").changeElementType("h1").css('text-transform','uppercase');