Change the tag name but keep all the attributes

I have something like this:

<span id="anId" someOtherAttributes....>test</span>

which I want to change into:

<a id="anId" theSameOtherAttributes...>test</a>

I have two questions :

1. How can I change just the tag name?

   or

2. How can I copy all the attributes?

Here's a non-elegant, but working solution:

// create a new <a> element
new_element = $("<a/>");
// iterate over every attribute of the #some_id span element
$.each($("#some_id").get(0).attributes, function(i, attrib) {
        // set each attribute to the specific value
        $(new_element).attr(attrib.name, attrib.value);

});
// carry over the html content
new_element.html($("#some_id").html());
// finally, swap the elements   
$("#some_id").replaceWith(new_element); 

You should use the outerHtml propery of the HTMLElement you want to change.

In this way, it becomes very easy to change a span to an anchor: we just need to replace ^<span with <a and </span>$ with </a>. Using a regular expression to change just the first and the last occurrence of the opening and closing tag, we keep the attributes as they originally were.

The code is here:

var newElement = $('a-selector').get(0).outerHTML.replace(/^<span/, "<a").replace(/<\/span>$/, "</a>");
$('a-selector').replaceWith(newElement);

This example uses jQuery. Please refer to this fiddle to see it working.

What are you actually trying to achieve here? If it is just styling, then using CSS would be better. If you want something to become a clickable link (or a link to become non-clickable), then you can just remove the href attribute.

I'm not going to code it, but to head you in the right direction, lookup how to build a tag in jquery (something like http://api.jquery.com/append/)

Then loop through each tag with something like Iterating over element attributes with jQuery, and add each attribute to the appended tag.

EDIT: fine, here is an example: http://jsfiddle.net/mazzzzz/xUUn3/

Here is a method I use to replace html tags in jquery:

// Iterate over each element and replace the tag while maintaining attributes
$('span#anId').each(function() {

  // Create a new element and assign it attributes from the current element
  var NewElement = $("<a />");
  $.each(this.attributes, function(i, attrib){
    $(NewElement).attr(attrib.name, attrib.value);
  });

  // Replace the current element with the new one and carry over the contents
  $(this).replaceWith(function () {
    return $(NewElement).append($(this).contents());
  });

});

The each function I use on the first line is somewhat unnecessary in this case, as we are only selecting a single item by id. I still prefer using each here, since would allow this same code to loop through all items with a specific class as well.

You can use this code with jQuery :

function replaceElementTag(targetSelector, newTagString) {
    $(targetSelector).each(function(){
        var newElem = $(newTagString, {html: $(this).html()});
        $.each(this.attributes, function() {
            newElem.attr(this.name, this.value);
        });
        $(this).replaceWith(newElem);
    });
}

And example usage :

replaceElementTag('img', '<amp-img></amp-img>');