Как направить метод JQuery .html во внешнюю HTML-оболочку?

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. Когда вы звоните 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>');

Answer 3

Вместо этого установите div с классом, а затем установите его содержимое.

Вместо того, чтобы беспокоиться об удалении и добавлении, и, поскольку вы используете jQuery, вы также можете скрывать и показывать с обоими "on""страница, просто скрытая до необходимости.