How to disable link tag (convert to range)

Question

I have a bunch of anchor tags ( <a> ) that I need to convert to <span> tags. I don't need to do this to disable preventDefault() I know about preventDefault() and returning false from the click event handler). I just need to do this to enable drag and drop sorting (which IE forbids on the anchor tag but allows on the gap).

I have a working solution that is great.

http://jsfiddle.net/5HGbx/

I'm just wondering if any of you wizards have an easier way to achieve the same end result.

Answer 1

you can use replaceWith from jQuery API

 $('#myButton').click(function(){ $("#someDiv a").replaceWith(function(){ return $("<span>" + $(this).html() + "</span>"); }); }); 

Spell here: http://jsfiddle.net/naveen/ufYCt/1/

Answer 2

Mixing standard DOM methods with jQuery is a bit strange and unnecessary. You could just do something like this:

 function aToSpan() { var $link = $('a'); var $span = $('<span>'); $link.after($span.html($link.html())).remove(); } 

This simply copies the link content to the new <span> , and then replaces <a> with the new <span> .

Literature:

• after
• html
• remove

Answer 3

from naveen answer you lose the href tag

if you want the href tag to just change it like this:

 $('#myButton').click(function(){ $("#someDiv a").replaceWith(function(){ return $("<span href=\""+$(this).attr('href')+"\">" + $(this).html() + "</span>"); }); });