javascript - jQuery convert DOM element to different type

Question

I need to convert a DOM element to a different type (as in HTML tag name, a to p in this case), but still retain all the original elements attributes. Whether they are valid for the new type or not doesn't matter in this case.

Any suggestions on how to do this?

I've looked at just creating a new element and copying the attributes across, but this isn't without it's own complications. In Firefox, DOMElement.attributes helpfully only includes attributes with a value, but in IE it reports all possible attributes for that element. The attributes property itself is read-only, so no way to copy that.

Answer 1

Sans-jQuery solution:

function makeNewElementFromElement( tag, elem ) {

    var newElem = document.createElement(tag),
        i, prop,
        attr = elem.attributes,
        attrLen = attr.length;

    // Copy children 
    elem = elem.cloneNode(true);
    while (elem.firstChild) {
        newElem.appendChild(elem.firstChild);
    }

    // Copy DOM properties
    for (i in elem) {
        try {
            prop = elem[i];
            if (prop && i !== 'outerHTML' && (typeof prop === 'string' || typeof prop === 'number')) {
                newElem[i] = elem[i];
            }
        } catch(e) { /* some props throw getter errors */ }
    }

    // Copy attributes
    for (i = 0; i < attrLen; i++) {
        newElem.setAttribute(attr[i].nodeName, attr[i].nodeValue);
    }

    // Copy inline CSS
    newElem.style.cssText = elem.style.cssText;

    return newElem;
}

E.g.

makeNewElementFromElement('a', someDivElement); // Create anchor from div