javascript - 动态更改的列表无法按预期工作 - 需要纯 js

Question

我想动态更改列表元素的顺序。单击后，单击的元素应跳转到第一个位置。但它总是跳到最后一个地方。有什么建议吗？

    const ulElement = document.getElementById('nav-list');
    const fragment = document.createDocumentFragment();
    const listItems = ['Home', 'Work', 'Contact'];
    
    
    listItems.forEach((item) => {
        const li = document.createElement('li');
        li.textContent = item;
        li.setAttribute('id', item.toLowerCase());
        li.addEventListener('click', (event) => {
            listItems.forEach((items, i) => {
                if (items.toLowerCase() === event.target.id) {
                    listItems.splice(i, 1);
                    listItems.unshift(event.target.id);
                }
                fragment.appendChild(li);
            });
            ulElement.appendChild(fragment);
            console.log(ulElement);
        });
        fragment.appendChild(li);
    });
    
    ulElement.appendChild(fragment);

<ul id="nav-list"></ul>

Answer 1

替换行:

ulElement.appendChild(fragment); 

与:

ulElement.insertBefore(fragment, ulElement.firstChild);