Question

I’m trying to toggle between two chunks of HTML, a span and an anchor. For example:

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

toggle with:

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

I’ve tried the following:

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

However, the elements get wrapped inside each other, and the DOM result is:

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

and

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

THE QUESTION IS:
How can I use replace the entire wrap, instead of wrapping these HTML chunks together?

Thanks!

Answer 1

Use replaceWith

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