How to change a link into a span of text or some kind of non-anchored element with prototype

Question

I have a link:

<a id="theLink" href="h***://stackoverflow.com">Go to SO</a>

How can I use prototype to either strip <a>'s or just leave the innerHTML so that the elements becomes:

[h***://stackoverflow.com] (something that is no longer clickable)?

Or maybe convert the <a> to a <span>

Answer 1

onclick="return false;"

Answer 2

try this

function removeAnchor() {
        var link = document.getElementById('theLink');
        var span = document.createElement("span");
        var txt = link.href;
        var textNode= document.createTextNode(txt);
        span.appendChild(textNode);
        link.parentNode.replaceChild(span, link);
}

Answer 3

To replace the <a> with a <span> with the initial element's href as content:

$('theLink').replace((new Element('span')).update($('theLink').href));

The result will be:

<span>h***://stackoverflow.com</span>

To replace the with a with the same content:

$('theLink').replace((new Element('span')).update($('theLink').innerHTML));

Which will result:

<span>Go to SO</span>