Как в JS найти и заменить span (определенного ID) на div?

Question

[Сергей Dydaevskiy]

Здравствуйте друзья, в связи с использованием на сайте с CMS WordPress плагина WP-RECALL должен танцевать с бубном что б вставить обычную ссылку в кнопку.
Что необходимо:
1)Найти на сранице span c ID=tab-button-vuyti_iz_lk и заменить на div
2) В этом же блоке заменить href (причем он всегда будет динамическим) на href="' . esc_url(wp_logout_url('/')) . '"
То есть что б из такого кода:

<span class="rcl-tab-button" data-tab="vuyti_iz_lk" id="tab-button-vuyti_iz_lk">
<a href="http://Домен/stranitsa-polzovatelya/?user=1&amp;tab=vuyti_iz_lk" data-post="eyJjYWxsYmFjayI6InJjbF9hamF4X3RhYiIsInRhYl9pZCI6InZ1eXRpX2l6X2xrIiwidXNlcl9MSyI6IjEifQ==" class="recall-button block_button active">
<i class="fa fa-sign-out vuyti_iz_lk"></i>
<span>Выход</span>

Получился вот такой:

<div class="rcl-tab-button" data-tab="vuyti_iz_lk" id="tab-button-vuyti_iz_lk">
<a href="' . esc_url(wp_logout_url('/')) . '" data-post="eyJjYWxsYmFjayI6InJjbF9hamF4X3RhYiIsInRhYl9pZCI6InZ1eXRpX2l6X2xrIiwidXNlcl9MSyI6IjEifQ==" class="recall-button block_button active">
<i class="fa fa-sign-out vuyti_iz_lk"></i>
<span>Выход</div>

Comments

[Дмитрий Беляев]

а какой смысл менять span на div?
Между ними вся разница, что 1й имеет по умолчанию display: inline; а второй display: block

Answer 1

[Сергей Dydaevskiy]

Странно но после подключенея Вашего скрипта блок просто исчез.
Как подключал:
В header уже подключена библиотека jquery:

<script src="/wp-content/themes/goldauto/got_top-master/js/jquery-2.2.1.min.js"></script>

Подключил в header url за ранее то есть:

<script> var logoutUrl = '<?php esc_url(wp_logout_url("/")) ?>'; </script>

За тем подключил крипт (там же в header)

<script type="text/javascript">
(function($) { $(function() {
    var span = $('#tab-button-vuyti_iz_lk');
    var link = span.next();
    var div = '<div class="' + span.attr('class') + '" data-tab="' + span.data('tab') + '" id="' + span.attr('id') + '">';
    
    span.remove();
    link
        .href(logoutUrl)
        .before(div);    
}); })(jQuery);
</script">

Comments

[Сергей Dydaevskiy]

Что-то делаю не так?

[Immortal_pony]

Сергей Dydaevskiy, во-первых, поправил ответ, так как код для изменения ссылки был неправильный.
Во-вторых, в приведенном html нет закрывающего тэга "span". Не совсем понятно, в каком месте он находится.
Примеры для двух вариантов:
span закрывается на первой строке
span закрывается на последней строке

[Сергей Dydaevskiy]

Immortal_pony: Очень благодарен за Ваш ответ, Вы мне здорово помогли! Спасибо

Answer 2

[Immortal_pony]

Так как CMS указана Wordpress, подозреваю, что допускается использование JQuery.

Подготовка необходимого url заранее:

<script> var logoutUrl = '<?php esc_url(wp_logout_url("/")) ?>'; </script>

Выполнение необходимой последовательности действий:

(function($) { $(function() {
    var span = $('#tab-button-vuyti_iz_lk');
    var link = span.next();
    var div = '<div class="' + span.attr('class') + '" data-tab="' + span.data('tab') + '" id="' + span.attr('id') + '">';
    
    span.remove();
    link
        .attr('href', logoutUrl)
        .before(div);    
}); })(jQuery);

Пример

Comments

[Сергей Dydaevskiy]

Огромное спасибо за Вашу помощь