Question

Possible Duplicate:
Change the tag name but keep all the attributes

Is it possible to replace an <a> tag with a <span> tag and keep all of it’s attributes?

I have this HTML, and when someone clicks on Edit I want to convert all edit links to span’s

<a href="javascript:void(0);" class="edit" data-id="123">Edit</a>

Once the user is done editing (by either pressing Save or Cancel) I then want to convert all the span tags back into links.

$(".edit").live("click", function(){
    $(".edit").addClass("inactive-link");
});

Answer 1

As FAngel indicates, style changes are much simpler in this case. I’m going to go ahead and use event delegation instead of .live in my example because .live will be removed in later jQuery versions:

$(document).on('click', '.edit', function (e) {
   //add inactive class to *this* link
   $(this).addClass('inactive-link');

   //stop default link behavior, i.e. opening a new page
   e.preventDefault();
});