jQuery将DOM元素转换为不同的类型

Question

我需要一个DOM元素(如HTML标签,转换成不同的类型a,以p在这种情况下),但仍保留所有的原始元素属性.在这种情况下,它们是否对新类型有效并不重要.

有关如何做到这一点的任何建议？

我看过只是创建一个新元素并复制属性,但这并非没有它自己的复杂性.在Firefox中,DOMElement.attributes仅仅包含具有值的属性,但在IE中它报告该元素的所有可能属性.该attributes属性本身是只读的,因此无法复制它.

Answer 1

Sans-jQuery 解决方案：

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;
}

例如

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