如何基于ID值在Dom中重新排序html子元素

Question

我有一个带有一些子元素的父div。我想基于两个id值重新排序子元素。例如1,4。这意味着要获取ID为1的项目并将其插入ID为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

您有权使用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 ID选择器（#example）不能以不转义的数字开头。例如，document.querySelector("#1")失败。您必须使用十六进制序列对1进行转义，该序列并不是很清楚：document.querySelector("#\\31")（字符\，3和1：0x31 =49= Unicode代码点1）。

Answer 2

不知道您如何使用insertBefore()，但应该没有任何问题：

更新：问题可能是您的代码在DOM完全加载之前正在运行。您可以使用insertBefore()：

包装代码

DOMContentLoaded