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 /> 内的任何元素上。 .