我想動態更改列表元素的順序。單擊后，被單擊的元素應跳轉到第一位。但它總是跳到最后一個地方。有什么建議嗎？    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>