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

您可以使用“ insertBefore”。 怎么看：

<script type="text/javascript">
        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);
        ulElement.insertBefore(fragment, ulElement.firstChild);
        console.log(ulElement);
    });
    fragment.appendChild(li);
});

ulElement.appendChild(fragment);
</script>

Answer 3

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

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

我认为这个方案更好。