javascript: how to replace all the tag with something different

I'd do it in reverse document order so that we process descendant elements before ancestor ones, and I'd avoid making a round-trip through markup since that's unnecessary overhead and will wipe out event handlers we could avoid wiping out. (Not much we can do about the ones on the actual elements we're changing, at least not ones attached with modern techniques.)

See comments:

// Get all target elements, and then get a raw array for them
// and reverse it. Then loop through the reversed copy.
$("div").get().reverse().forEach(function(src) {
  // Get a jQuery wrapper for this element
  var $src = $(src);

  // Create the replacement
  var $dest = $("<span>");

  // Move all its contents over
  $dest.append($src.contents());

  // Copy its attributes
  Array.prototype.forEach.call(src.attributes, function(attr) {
    $dest[0].setAttribute(attr.nodeName, attr.nodeValue);
  });

  // Replace it
  $src.replaceWith($dest);
});

Live Example:

setTimeout(function() {
  // Get all target elements, and then get a raw array for them
  // and reverse it. Then loop through the reversed copy.
  $("div").get().reverse().forEach(function(src) {
    // Get a jQuery wrapper for this element
    var $src = $(src);

    // Create the replacement
    var $dest = $("<span>");

    // Move all its contents over
    $dest.append($src.contents());

    // Copy its attributes
    Array.prototype.forEach.call(src.attributes, function(attr) {
      $dest[0].setAttribute(attr.nodeName, attr.nodeValue);
    });

    // Replace it
    $src.replaceWith($dest);
  });
}, 500);

div {
  border: 1px solid red;
}
span {
  border: 1px solid green;
}
.test {
  color: blue;
  font-weight: bold;
}

<p>Divs will change to spans in a moment. "Second" is blue because it has a class on it, to check that we copy attributes correctly.</p>
<div>
  <div>First
    <div>First nested</div>
  </div>
  <div class="test">Second</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Made simple jquery plugin

$.fn.renameTag = function(replaceWithTag){
  this.each(function(){
        var outerHtml = this.outerHTML;
        var tagName = $(this).prop("tagName");
        var regexStart = new RegExp("^<"+tagName,"i");
        var regexEnd = new RegExp("</"+tagName+">$","i")
        outerHtml = outerHtml.replace(regexStart,"<"+replaceWithTag)
        outerHtml = outerHtml.replace(regexEnd,"</"+replaceWithTag+">");
        $(this).replaceWith(outerHtml);
    });
    return this;
}

Usage:

$('asdf').renameTag('xyz')