如何使用 jquery 更改元素类型

javascript jquery

2022-08-30 05:42:31

我有以下代码

<b class="xyzxterms" style="cursor: default; ">bryant keil bio</b>

如何将标记替换为标记，同时保留所有其他属性和信息？bh1

答案 1

以下是使用jQuery执行此操作的一种方法：

var attrs = { };

$.each($("b")[0].attributes, function(idx, attr) {
    attrs[attr.nodeName] = attr.nodeValue;
});


$("b").replaceWith(function () {
    return $("<h1 />", attrs).append($(this).contents());
});

示例：http://jsfiddle.net/yapHk/

更新，这是一个插件：

(function($) {
    $.fn.changeElementType = function(newType) {
        var attrs = {};

        $.each(this[0].attributes, function(idx, attr) {
            attrs[attr.nodeName] = attr.nodeValue;
        });

        this.replaceWith(function() {
            return $("<" + newType + "/>", attrs).append($(this).contents());
        });
    };
})(jQuery);

示例：http://jsfiddle.net/mmNNJ/

答案 2

不确定jQuery。使用普通的JavaScript，你可以做到：

var new_element = document.createElement('h1'),
    old_attributes = element.attributes,
    new_attributes = new_element.attributes;

// copy attributes
for(var i = 0, len = old_attributes.length; i < len; i++) {
    new_attributes.setNamedItem(old_attributes.item(i).cloneNode());
}

// copy child nodes
do {
    new_element.appendChild(element.firstChild);
} 
while(element.firstChild);

// replace element
element.parentNode.replaceChild(new_element, element);

演示

不确定这如何跨浏览器兼容。

变体可以是：

for(var i = 0, len = old_attributes.length; i < len; i++) {
    new_element.setAttribute(old_attributes[i].name, old_attributes[i].value);
}

有关更多信息，请参阅 Node.attributes ^[MDN]。