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 />，如下所示：< / p>

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

这将“更改”换行标记，而不会丢失<div />标记内的实际元素。所有活动订阅者都应保留在<div />内的任何元素。

Answer 2

查看replaceWith方法的example。我知道你说你知道它，但我认为你是以错误的方式使用它。以下是它提到的内容片段：

$("button").click(function () {
  $(this).replaceWith("<div>" + $(this).text() + "</div>");
});

虽然您可能希望使用$(this).html()代替$(this).text()。仍然建议你看看页面。点击按钮，看它确实正在按照它说的那样做:)很抱歉，如果我误解了你的问题。

Answer 3

我建议您将innerHTML值保存为字符串，然后可以替换或删除并添加新元素，然后设置new值的innerHTML。

另一种解决方案是转到要替换的元素的父级，并更改innerHTML属性，将<div>和</div>替换为<span>和{{1} }。

这个有点棘手，特别是因为你需要确定如果你在innerHTML中有多个div，那么你只需要替换一个感兴趣的div。

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

3 个答案: