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

E.g。

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

Answer 2

虽然不是一个完整的解决方案，但逻辑基本上是：

保存现有元素：

var oldElement = $(your selector here);

创建一个新元素并在oldElement

之前或之后插入它

复制属性

  oldElement.attr().each(function(){
    copy old
    });

更好的是，这是一个插件的示例，可以满足您的需求：

http://plugins.jquery.com/project/getAttributes

Answer 3

更现代（2020年以上）的方法是：

function changeTag (element, tag) {
    // prepare the elements
    const newElem = document.createElement(tag)
    const clone = element.cloneNode(true)

    // move the children from the clone to the new element
    while (clone.firstChild) {
      newElem.appendChild(clone.firstChild)
    }

    // copy the attributes
    for (const attr of clone.attributes) {
      newElem.setAttribute(attr.name, attr.value)
    }
    return newElem
  }

与@James答案相比，您不需要复制cssText，因为浏览器已经处理了它。您也不需要字符串/数字dom属性，因为这些属性也已正确迁移。最好只在克隆的节点上工作，而不要同时在两个节点（克隆和elem）上工作

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

3 个答案: