JQuery:如何在不干扰内容的情况下替换标签？

Question

我正在寻找一种使用JQuery删除html标签(打开和关闭)而不会打扰内容的技术.

例如,鉴于此标记......

<div id="myDiv">
   Leave My Content alone!
</div>

我想谈谈......

<span id="mySpan">
     Leave My Content Alone!
</span>

我尝试了什么:
我想到了$("#myDiv").remove或$("#myDiv").replaceWith,但它们都破坏了标签的内容.

一如既往,感谢您的协助!

Answer 1

最简单的方法是做这样的事情:

$("#myDiv").replaceWith('<span id="mySpan">' + $("#myDiv").html() + "</span>");

然而,当你意识到你将失去你内部任何元素的所有活动订阅者时,这就会崩溃<div />.更好的方法是将内容移动到<span />标记之前的新<div />标记,然后删除<div />,如下所示:

var yourDiv = $("#myDiv");
var yourSpan = $('<span id="mySpan"></span>');
yourDiv.before(yourSpan);
yourSpan.append(yourDiv.children());
yourDiv.remove();

这将"更改"包装标签,而不会丢失标签内的实际元素<div />.所有活动订阅者都应该保留在其中的任何元素<div />.