Рациональный способ переместить текст из родительского в новый ?

#javascript #dom

Вопрос:

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

Как можно 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>

 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]) ошибка.

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

1. ap является ли span элементом? почему у вас есть ap[i] вместо просто ap

2. Что это за сообщение об ошибке?

3. Ошибка типа: аргумент 1 узла.appendChild не является объектом

4. @xec если я удалю индекс массива, код добавит весь массив в виде текста к последнему элементу родительского дерева. Итак, мне нужно добавить каждого дочернего элемента к каждому родительскому

5. но это не массив, это элемент span — верно?

Ответ №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);
}