javascript - 如何将 jQuery 的 .html 方法指向外部 HTML 包装？

Question

我试图在两个 HTML block 之间切换，一个是 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 block 包装在一起？

谢谢!

Answer 1

使用replaceWith

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