Рациональный способ переместить текст в родительский <ul>в новый <span>?

Question

Получение Html-дерева с глубиной = 2 из WordPress Мне нужно переместить дочерний textContent в родительский, даже в новый в конце.

Как appendChild() может быть применен здесь правильно?

HTML-дерево (до)

<ul id="cities">
  <li><a target="_blank" rel="nofollow" href="">.1.</span></a>
     <ul class="sub-menu">
       <li><a href="">.1.2.</a></li>
     </ul>
   </li>
    ...
</ul>

HTML дерево (ожидание)

<ul id="cities">
    <li><a href="">.1.<span class="popup">.1.2.</span></a>
    </li>
    ...
</ul>

JS

const suba = document.querySelectorAll('.sub-menu a');
const ct = document.querySelectorAll('#cities > li').length;
var init = document.querySelectorAll('#cities > li > a');
var ap = document.createElement('span');   appendix.className = 'popup';

for (var i=0; i < ct; i++) {
    ap.appendChild(document.createTextNode(suba[i].textContent);
    init[i].appendChild(ap[i]);
}

На самом деле, я не могу представить ничего лучше, как начинаю в JavaScript. В строке init[i].appendChild(ap[i]) есть ошибка.

Если я удаляю индекс из аргумента, строка типа изменилась на init[i].appendChild(ap), новый Span будет добавлен правильно, но только к последнему родительскому узлу с textContent в качестве длинной строки дочерних элементов.

Answer 1

Если мы создадим текстовый узел, например:

var foo = document.createTextNode('abc');

, а затем проверьте значение foo[0], мы увидим, что значение равно undefined. Это означает, что ваш код передал undefined в appendChild function, что привело к ошибке, которую вы вставили в раздел комментариев. Вы нашли хак, который технически решает проблему, но назначает разумное значение в ap[i] для его использования. Но это не обязательно. Этот упрощенный код элегантен и должен работать:

for (var i=0; i < ct; i++) {
    init[i].appendChild(document.createTextNode(suba[i].textContent);
}