Переместить конкретный элемент в конец элемента div с помощью JavaScript

Question

Например, у меня есть div ниже с четырьмя различными значениями в lis, генерируемом динамически, и данные поступают из Rest API:

<div id=make_last>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
</div>

Я хочу переместить <li>two</li> вниз, как показано ниже черезjavascript или jquery

<div>
  <li>one</li>
  <li>three</li>
  <li>four</li>
  <li>two</li>
</div>

Есть мысли, как мне этого добиться?

Answer 1

Самый простой способ переместить что-либо в конец элемента DOM - это добавить его, поскольку appendChild помещает элемент в конец;он автоматически удаляет элемент из текущей позиции.

const container = document.querySelector('#make_last'); // or however you get a reference
const itemToMove = container.children[1]; // or however you want to find the child
container.appendChild(itemToMove);

Answer 2

Найдите, используя each

var elemTwo;

$("li").each(function() {
  if (this.innerText == "two") elemTwo = this;
});