Как переупорядочить html дочерние элементы в Dom на основе значения id

Question

У меня есть родительский div с некоторыми дочерними элементами. Я хочу изменить порядок дочерних элементов на основе двух значений идентификатора. например 1,4. Это означает, что нужно взять элемент с идентификатором 1 и вставить его над элементом с идентификатором 4.

    <div class="parent">
        <div id="1">First</div>
        <div id="2">Second</div>
        <div id="3">Third</div>
        <div id="4">Fourth</div>
        <div id="5">Fifth</div>
    </div>

Создание компонента перетаскивания для реакции. И это то, что я пробовал

    const element = document.getElementById('1') //dragStart
    const targetElement = document.getElementById('4') //dragEnter

    const parent = document.querySelector('.parent') // drop
    parent.insertBefore(element, targetElement)

Но проблема в том, когда я беру первый элемент и хочу поместить его внизу (последний дочерний элемент). Это не в состоянии сделать это. Как поместить дочерний элемент после последнего потомка с методом insertBefore ()?

Answer 1

Примечание: Это ответы оригинальный вопрос . Теперь вопрос отредактирован для ссылки на React. Вы не будете использовать следующее в проекте React. Вы изменили бы состояние, которое представляет DOM, а затем позволили React обработать обновление DOM.

---

Вы можете использовать insertBefore:

function moveElement(move, before) {
    // Get the element to move
    const elToMove = document.getElementById(move);
    // Get the element to put it in front of
    const elBefore = document.getElementById(before);
    // Move it
    elBefore.parentNode.insertBefore(elToMove, elBefore);
}

function moveElement(move, before) {
    const elToMove = document.getElementById(move);
    const elBefore = document.getElementById(before);
    elBefore.parentNode.insertBefore(elToMove, elBefore);
}

setTimeout(() => {
    moveElement("1", "4");
}, 800);

<div class="parent">
    <div id="1">First</div>
    <div id="2">Second</div>
    <div id="3">Third</div>
    <div id="4">Fourth</div>
    <div id="5">Fifth</div>
</div>

---

Примечание: я предлагаю избегать значений id, начинающихся с цифр. Хотя они совершенно действительны HTML и отлично работают с getElementById, они будут неприятны, если вам нужно нацелить их с помощью CSS, потому что селектор идентификатора CSS (#example) не может начните с неоткрытого ди git. Например, document.querySelector("#1") не удается. Вы должны экранировать 1 с шестнадцатеричной последовательностью, которая не очень понятна: document.querySelector("#\\31") (символы \, 3 и 1: 0x31 = 49 = код Unicode балл за 1).

Answer 2

Не знаю, как вы используете insertBefore(), но не должно быть никаких проблем:

Обновление: Проблема Возможно, ваш код работает до полной загрузки DOM. Вы можете заключить код в DOMContentLoaded:

<script>
document.addEventListener('DOMContentLoaded', (event) => {
  const element = document.getElementById('1') //dragStart
  const targetElement = document.getElementById('4') //dragEnter

  const parent = document.querySelector('.parent') // drop
  parent.insertBefore(element, targetElement)
});

</script>

<div class="parent">
  <div id="1">First</div>
  <div id="2">Second</div>
  <div id="3">Third</div>
  <div id="4">Fourth</div>
  <div id="5">Fifth</div>
</div>

Размещение первого элемента в качестве последнего элемента с использованием nextSibling:

<script>
document.addEventListener('DOMContentLoaded', (event) => {
  const parentNode = document.querySelector('.parent');
  const element = document.getElementById('1') //dragStart
  const targetElement = document.querySelector('.parent').lastElementChild //get last child
  parentNode.insertBefore(element, targetElement.nextSibling);
});

</script>

<div class="parent">
  <div id="1">First</div>
  <div id="2">Second</div>
  <div id="3">Third</div>
  <div id="4">Fourth</div>
  <div id="5">Fifth</div>
</div>