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

Answer 2

谢谢你的提问；我的代码在这里：const ulElement = document.getElementById('nav-list');const fragment = document.createDocumentFragment();const listItems = ['Home', 'Work', 'Contact'];listItems.forEach(item=>{&nbsp; &nbsp; const li = document.createElement('li');&nbsp; &nbsp; li.textContent = item;&nbsp; &nbsp; li.setAttribute('id', item.toLowerCase());&nbsp; &nbsp; fragment.appendChild(li);&nbsp; &nbsp; return li;});ulElement.appendChild(fragment);ulElement.addEventListener("click",event=>{&nbsp; &nbsp; let li =event.target;&nbsp; &nbsp; if(li.tagName==='LI'){&nbsp; &nbsp; &nbsp; &nbsp; fragment.appendChild(li);&nbsp; &nbsp; &nbsp; &nbsp; ulElement.insertBefore(fragment,ulElement.firstElementChild);&nbsp; &nbsp; }});我觉得这个方案更好。