JavaScript-transformTag: switch/change the HTML DOM tag type

a-transform-change-switch-tag.js

//lsauer.com, 2012; rev. 2014 by lo sauer
//description: transformTag fully replaces a node by a different Tag, and re-attaches all children to the newly formed Tag
//             Any desired EventHandlers must be re-attached manually
//@param tagIdOrElem:    an HTMLElement Id-Name or an instance of any HTMLElement
//[@param tagType]:      the HTML Tag Type. Default is 'span' (HTMLSpanElement)

function transformTag(tagIdOrElem, tagType){
    var elem = (tagIdOrElem instanceof HTMLElement) ? tagIdOrElem : document.getElementById(tagIdOrElem);
    if(!elem || !(elem instanceof HTMLElement))return;
    var children = elem.childNodes;
    var parent = elem.parentNode;
    var newNode = document.createElement(tagType||"span");
    for(var a=0;a<elem.attributes.length;a++){
        newNode.setAttribute(elem.attributes[a].nodeName, elem.attributes[a].value);
    }
    for(var i= 0,clen=children.length;i<clen;i++){
        newNode.appendChild(children[0]); //0...always point to the first non-moved element
    }
    newNode.style.cssText = elem.style.cssText;
    parent.replaceChild(newNode,elem);
}

examples.js

//Google search page

transformTag(document.querySelector('#prm-pt'), 'div')
transformTag('most-visited') 'ul')

You should also check is the css style empty before copying, otherwise result in a empty 'style' attribute on the new element.

Here is the updated function body:

// Rename a tag (change tag type). Ex, <div> -> <a>
function renameTag(target, newNode) {
  // copy attributes
  for (var i = 0; i < target.attributes.length; i++) {
    newNode.setAttribute(
      target.attributes[i].nodeName,
      target.attributes[i].nodeValue
    );
  }

  // move children. firstChild is a live API so we can 'while' on that
  while (target.firstChild) {
    newNode.appendChild(target.firstChild);
  }

  // copy in-line styles
  if (target.style.length > 0) {
    newNode.style.cssText = target.style.cssText;
  }

  return target.parentNode.replaceChild(newNode, target);
}