动态更改的列表无法按预期工作 - 需要纯 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);

Answer 2

谢谢你的提问；我的代码在这里：

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());

    fragment.appendChild(li);

    return li;

});

ulElement.appendChild(fragment);

ulElement.addEventListener("click",event=>{

    let li =event.target;

    if(li.tagName==='LI'){

        fragment.appendChild(li);

        ulElement.insertBefore(fragment,ulElement.firstElementChild);

    }

});

我觉得这个方案更好。