如何将jQuery .html方法重定向到outerHTML包装？

Question

我正在尝试在两个HTML块之间切换，span和anchor。例如：

<span class="current">Demo</span>

切换：

<a href="http://someurl/" class="demo">Demo</a>

我尝试了以下内容：

$(spanDemo).html('<a href="http://someurl/" class="demo">Demo</a>');
$(anchorDemo).html('<span class="current">Demo</span>');

然而，元素彼此包裹在一起，DOM结果是：

<span class="current"><a href="http://someurl/" class="demo">Demo</a></span>

和

<a href="http://someurl/" class="demo"><span class="current">Demo</span></a>

问题是： 如何使用替换整个包装，而不是将这些HTML块包装在一起？

谢谢！

Answer 1

使用replaceWith

$('.current').replaceWith('<a href="http://someurl/" class="demo">Demo</a>');
$('.demo').replaceWith('<span class="current">Demo</span>');

Answer 2

使用类设置div，然后设置它的内容。

而不是担心删除和添加，并且因为你正在使用jQuery，你也可以隐藏和显示页面上的“on”，只需隐藏直到需要。

Answer 3

将每个元素包裹在div中。当你致电html()时，你正在替换该元素的innerHTML。

将您的HTML更改为以下内容：

<div id="span">
    <span class="current">Demo</span>
</div>
<div id="a">
    <a href="http://someurl/" class="demo">Demo</a>
</div>

然后使用这些选择器进行切换：

$('#span').html('<a href="http://someurl/" class="demo">Demo</a>');
$('#a').html('<span class="current">Demo</span>');