6

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?

Community
  • 1
  • 1
Emmanuel Demey
  • 2,158
  • 4
  • 18
  • 21

6 Answers6

7

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);
Uku Loskit
  • 40,868
  • 9
  • 92
  • 93
4

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.

Alessandro Vendruscolo
  • 14,493
  • 4
  • 32
  • 41
1

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.

nickf
  • 537,072
  • 198
  • 649
  • 721
0

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.

Seth McCauley
  • 983
  • 11
  • 24
0

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>');
icaksama
  • 712
  • 10
  • 15
0

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/

Community
  • 1
  • 1
Jess
  • 8,628
  • 6
  • 49
  • 67
  • When I used el.attributes, I have got 'undefined'. But I tried el.attr("class"), I have something. So Why el.attributes return undefined ? – Emmanuel Demey Jun 26 '11 at 08:19
  • Where is the el. coming from? Inside the loop there are two variable specifically for the attribute name & value, just create the new tag with something like `$('#thetagidORsomething').append('tag').attr('id','tmp');` Then inside the loop assign each attribute to the item with the id of `tmp`. I added an example to my post. – Jess Jun 26 '11 at 19:28