Как переместить элемент списка в указанный индекс (позицию) в неупорядоченном списке, используя Javascript

Question

Допустим, у меня есть следующий неупорядоченный список, как я могу переместить «Три» в любой индекс (позицию) в списке? Подход должен быть динамичным c. Замена текстового содержимого элемента не вариант. Потому что каждый элемент списка будет содержать и другие элементы.

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
  <li>six</li>
  .
  .
  .
  <li>Hundred</li>  /* Nth List Element */
</ul>

Пробные решения из уже отвеченных похожих вопросов. Но не получил желаемого результата.

Я уже пробовал это

1. Извлечение списка в массиве через jQuery
2. Использованный array.each чтобы пройти массив
3. Затем с помощью prepend переместить конкретный li в верхнюю часть списка

Но при таком подходе я могу только переместить элемент li в верхнюю часть списка. Не в любой желаемой позиции.

Answer 1

const ul = document.querySelector('ul');
const items = [...ul.querySelectorAll('li')];

const moveItem = (from, to) => {
  if (to > items.length - 1 || to < 0) return;
  
  const item = items[from];
  if (!item) return;
  
  ul.removeChild(item);
  ul.insertBefore(item, ul.children[to]);
}

moveItem(5, 0);

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
  <li>six</li>  
</ul>

Answer 2

Я бы использовал конструктор с индексным методом для этого:

function LiMover(liParent){
  this.kids = liParent.children;
  this.move = (index, beforeIndex = null)=>{
    const k = this.kids, e = k[index];
    if(beforeIndex === null){
      liParent.appendChild(e)
    }
    else{
      liParent.insertBefore(e, k[beforeIndex]);
    }
    return this;
  }
}
const liMover = new LiMover(document.querySelector('ul'));
liMover.move(0); // move 0 index (one) after last index
liMover.move(5, 0); // move 5 index (one) back to 0 index
liMover.move(1, 4); // move 1 index (two) to 4 index
liMover.move(3, 5).move(2, 0); // showing return this chain

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
  <li>six</li>  
</ul>

Answer 3

попробуйте этот обмен

  const listElts = Array.from(document.querySelectorAll('li'));
  const swap1 = listElts[2].textContent;
  const swap2 = listElts[4].textContent;
  listElts[2].textContent = swap2;
  listElts[4].textContent = swap1;

Answer 4

Это, конечно, разрешимо. Я реализовал функцию, которая меняет два элемента коллекции:

function swap(items, first, second) {
    var aux = items[first].innerHTML;
    items[first].innerHTML = items[second].innerHTML;
    items[second].innerHTML = aux;
}

swap(document.querySelectorAll("ul > li"), 2, 4);

См. Здесь: https://jsfiddle.net/5qropsvu/