Как переименовать / создать новый тег в уже указанной вложенности

Question

Подскажите пожалуйста как можно переименовать тег или же создать новый в уже указанной вложенности. В коде функция t5, с помощью рекурсивной функции r5 получает те теги внутри z-5, которые не имеют вложенных тегов. И необходимо эти теги заменить/переименовать(если это возможно) на mark

К примеру:

<span>hi</span> ---- <mark>hi</mark>

Пробовал сделать это по разному, но ничего не получилось. Последнюю попытка ниже, при выводе функции переполняется стек, так и не понял почему.

function t5(elem) {
  r5(elem);

  function r5(element) {
    if (element.children.length == 0) { //Проверяет есть ли у элемента вложенный элемент
      // console.log(element) // Вывод всех элементов которые прошли проверку
      let b = document.createElement("mark") // Создаю элемент
      b.innerHTML = element // Кладу в него текст из element который прошел проверку
      element.append(b) // Кидаю его после этого элемента
    }
    Array.from(element.children).forEach(item => r5(item)) // Перебираю все элементы
  }
}

document.querySelector('.b-5').addEventListener('click', () => { // Запускаю функцию по кнопке
  let z5 = document.querySelector('.z-5');
  t5(z5);
});

<div class="z-5 section">
  <div>
    <p>Hello <span>Hi</span> <span>Ma <b>hai</b></span></p>
    <div>
      <h2>Hello <span>Hi</span> <b>one</b></h2>
    </div>
  </div>
</div>
<button class="button-primary  b-5">5</button>

БЛОГ НА HUSL

Как переименовать / создать новый тег в уже указанной вложенности

Ответы (0 шт):