纯JS实现100个Div点击置顶后归位异常问题求助

问题描述 #

需要创建100个从div1到div100的元素，实现两个核心功能：

• 点击任意未置顶的div，将其移至页面顶部，置顶的元素按点击顺序排列在最前方，原位置的元素自动补位
• 再次点击已置顶的div，使其回到原本的初始位置（比如div31要回到div30和div32之间）

目前遇到的问题：点击已置顶的div后，元素无法回到正确的初始位置，而是随机错位。

错误原因分析 #

• 动态集合HTMLCollection的索引混乱：你用document.getElementsByClassName获取的divElements是动态集合，DOM结构变化（比如移动div到顶部）时，集合的元素顺序和索引会自动更新。但你在循环里用初始的i赋值给originalPosition，后续DOM变化后，divElements的索引已经和初始状态不一致，导致找参考元素时完全出错。
• originalPositions数组冗余无效：这个数组只是把初始索引存了一遍（[0,1,2,...,99]），后续用divElements[originalPositions[originalPosition]]等价于divElements[originalPosition]，但因为divElements是动态集合，此时的元素已经不是初始位置的那个了。
• 未提前保存回位锚点：没有在DOM初始化时为每个div记录好它原本的位置锚点（比如下一个兄弟元素），而是依赖后续动态变化的集合索引，导致回位时找不到正确的插入位置。

修复后的代码 #

document.addEventListener('DOMContentLoaded', function() {
    // 创建100个div元素
    for (let i = 1; i <= 100; i++) {
        const div = document.createElement('div');
        div.className = 'div-element';
        div.textContent = 'div' + i;
        document.body.appendChild(div);
    }

    // 转为静态数组，避免动态集合的索引问题
    const divElements = Array.from(document.getElementsByClassName('div-element'));
    
    divElements.forEach((div) => {
        let isPinnedTop = false;
        // 提前保存初始状态下的下一个兄弟元素，作为回位的锚点
        const originalNextSibling = div.nextElementSibling;
        const parent = div.parentElement;

        div.addEventListener('click', function() {
            if (!isPinnedTop) {
                // 移到容器顶部
                parent.insertBefore(div, parent.firstElementChild);
                isPinnedTop = true;
            } else {
                // 回到原位置：有原兄弟就插在它前面，否则插在末尾
                if (originalNextSibling) {
                    parent.insertBefore(div, originalNextSibling);
                } else {
                    parent.appendChild(div);
                }
                isPinnedTop = false;
            }
        });
    });
});

关键修复说明 #

• 把动态的HTMLCollection转为静态数组，确保后续DOM变化不会影响我们保存的元素列表
• 为每个div提前保存originalNextSibling：这是最准确的回位锚点，不管其他元素怎么移动，这个锚点对应的是初始位置的下一个元素，插在它前面就能精准回到原位置
• 去掉冗余的originalPositions数组，简化逻辑，避免索引混乱问题

内容的提问来源于stack exchange，提问作者Alexandr Boroshenko