javascript - 用 span 标签替换标签

Question

我想在下面提到的代码中使用 javascript 或 jquery 将标签替换为 span 标签。

<a class="multi-choice-btn" id="abcd123">
     <img class="x-panel-inline-icon feedback-icon " src="../images/choice_correct.png" id="pqrs123">
</a>

这应该改变如下。

<span class="multi-choice-btn" id="abcd123">
     <img class="x-panel-inline-icon feedback-icon " src="../images/choice_correct.png" id="pqrs123">
</span>

替换必须在类“multi-choice-btn”的基础上进行，因为 id 是动态的。

请帮忙。

Answer 1

var anchor = document.getElementById("abcd123"),
    span = document.createElement("span");

span.innerHTML = anchor.innerHTML;
span.className = anchor.className;
span.id = anchor.id;

anchor.parentNode.replaceChild(span,anchor);​

http://jsfiddle.net/tCyVH/

Answer 2

您可以执行以下操作：

$('a').contents().unwrap().wrap('<span></span>');​

演示：http: //jsfiddle.net/XzYdu/

如果要保留该属性，可以执行以下操作：

// New type of the tag
var replacementTag = 'span';

// Replace all a tags with the type of replacementTag
$('a').each(function() {
    var outer = this.outerHTML;

    // Replace opening tag
    var regex = new RegExp('<' + this.tagName, 'i');
    var newTag = outer.replace(regex, '<' + replacementTag);

    // Replace closing tag
    regex = new RegExp('</' + this.tagName, 'i');
    newTag = newTag.replace(regex, '</' + replacementTag);

    $(this).replaceWith(newTag);
});

演示：http: //jsfiddle.net/XzYdu/1/

Answer 3

不是最短但有效：

$('.multi-choice-btn').replaceWith(function() {
    return $('<span>', {
        id: this.id,
        `class`: this.className,
        html: $(this).html()
    })
});​

见http://jsfiddle.net/dfsq/unVfp/

Answer 4

请参阅此附加的 jsFiddle。

var props = $(".multi-choice-btn").prop("attributes");

var span = $("<span>");

$.each(props, function() {
    span.attr(this.name, this.value);
});

$(".multi-choice-btn").children().unwrap().wrapAll(span);​

Answer 5

尝试使用 replaceWith 和一个小的 attrCopy 逻辑。见下文，

演示：http: //jsfiddle.net/4HWPC/

$('.multi-choice-btn').replaceWith(function() {

    var attrCopy = {};
    for (var i = 0, attrs = this.attributes, l = attrs.length; i < l; i++) {
        attrCopy[attrs.item(i).nodeName] = attrs.item(i).nodeValue;
    }       

    return $('<span>').attr(attrCopy).html($(this).html());

});