Question

我有这样的事情：

<span id="anId" someOtherAttributes....>test</span>

我想改成：

<a id="anId" theSameOtherAttributes...>test</a>

我有两个问题：

如何更改标签名称？

或
如何复制所有属性？

Answer 1

这是一个非优雅但有效的解决方案：

// create a new <a> element
new_element = $("<a/>");
// iterate over every attribute of the #some_id span element
$.each($("#some_id").get(0).attributes, function(i, attrib) {
        // set each attribute to the specific value
        $(new_element).attr(attrib.name, attrib.value);

});
// carry over the html content
new_element.html($("#some_id").html());
// finally, swap the elements   
$("#some_id").replaceWith(new_element);

Answer 2

您应该使用要更改的outerHtml的{{1}}属性。

通过这种方式，将HTMLElement更改为span nchor非常容易：我们只需要将a替换为^<span和<a与</span>$。使用正则表达式仅更改开始和结束标记的第一个和最后一个匹配项，我们将属性保持原样。

代码在这里：

</a>

此示例使用jQuery。请参阅此fiddle以查看其是否有效。

Answer 3

你到底想要实现的目标是什么？如果它只是样式，那么使用CSS会更好。如果您希望某些内容成为可点击的链接（或指向不可点击的链接），则只需删除href属性即可。

Answer 4

我不打算对它进行编码，而是为了引导您朝着正确的方向前进，查找如何在jquery中构建标记（类似于http://api.jquery.com/append/）

然后使用类似Iterating over element attributes with jQuery的内容遍历每个标记，并将每个属性添加到附加标记中。

编辑：很好，这是一个例子：http://jsfiddle.net/mazzzzz/xUUn3/

Answer 5

您可以将此代码与jQuery一起使用：

function replaceElementTag(targetSelector, newTagString) {
    $(targetSelector).each(function(){
        var newElem = $(newTagString, {html: $(this).html()});
        $.each(this.attributes, function() {
            newElem.attr(this.name, this.value);
        });
        $(this).replaceWith(newElem);
    });
}

示例用法：

replaceElementTag('img', '<amp-img></amp-img>');

更改标记名称但保留所有属性

5 个答案: