Question

What’s the easiest way to turn an <a> into <span> keeping all the attributes and content? (except for perhaps the href).

.replaceWith() replaces the whole shebang.

Answer 1

You can iterate an element’s attributes using the attributes property. You can copy an attribute using attribute.cloneNode(true). You can add that cloned attribute to another element’s attributes collection with element.attributes.setNamedItem(attribute).

Here’s a quick plugin that does it:

$.fn.cloneTo = function (target) {
    // copies the attributes, html, and event handlers of the first element to each of
    // the elements in the provided jQuery object or that match the provided selector
    if (!target || !target.jquery) {
        target = $(target);
    }
    if (this.length) {
        $.each(this[0].attributes, function(i, attr) {
            target.each(function(){
                this.attributes.setNamedItem(attr.cloneNode(true));
            });
        });
        $.each(this.data("events"), function(evt, handlers){
            $.each(handlers, function(i, handler){
                target.bind(evt, handler);
            });
        });
        target.empty().append(this.contents());
    }
    return this;
};

Use it like this:

var span = $("<span>");
$("#myLink").cloneTo(span).replaceWith(span);

Working demo: http://jsfiddle.net/gLqZJ/2

Edit: Updated above to copy event handlers and to keep the descendent nodes untouched, rather than duplicating the HTML.