Как отсортировать DOM элементы в обратную сторону на чистом js?

Question

[osimone]

Как отсортировать li внутри списка в обратном порядке (по тексту внутри)?

<ul>
        <li><a href="#">Link1</a></li>
        <li><a href="#">Link2</a></li>
        <li><a href="#">Link3</a></li>
        <li><a href="#">Link4</a></li>
    </ul>

попробовал через reverse вроде работает, но как отобразить в html странице не знаю, либо как то через метод sort еще можно

let [...sortLinks] = document.querySelectorAll('ul li')
sortLinks.reverse()

Answer 1

[0xD34F]

Где надо развернуть элементы: const parent = document.querySelector('ul');.

Разворачиваем:

parent.querySelectorAll(':scope > *').forEach(n => parent.prepend(n));

// или

Element.prototype.append.apply(parent, [...parent.children].reverse());

// или

const [ first, ...rest ] = parent.children;
first?.before(...rest.reverse());

// или

for (const n of parent.children) {
  parent.insertBefore(n, parent.firstElementChild);
}

// или

for (let i = parent.children.length; i--;) {
  parent.insertAdjacentElement('beforeend', parent.children[i]);
}

// или

const elems = Array.from(parent.children);
while (elems.length) {
  parent.appendChild(elems.pop());
}

Comments

[osimone]

Класс!

[Fedor Vlasenko]

Говнокод каждую итерацию изменяется dom
за одно действие

const ul = document.querySelector('ul');
ul.innerHTML = [...ul.children].reduce((a, c) => c.outerHTML + a, '')

[Фёдор]

Fedor Vlasenko, Почему вы использовали метод reduce?

[Fedor Vlasenko]

Фёдор Удобный метод свёртки для примера.
Можно использовать и обычные циклы

[Фёдор]

Fedor Vlasenko, если я правильно понял( в чём конечно сомневаюсь), то данный метод используется для вычислений. Математических.

[Fedor Vlasenko]

Фёдор, неправильно вы поняли. То, что происходит в цикле reduce необязательно должно быть связано с математикой.

[Фёдор]

Fedor Vlasenko, хорошо. Принял к сведению. (: