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

Question

I would like to change order of list elements dynamically. After click the clicked element should jump to the first place. But it jumps always to the last place. Any suggestion?

  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

Replace the line:

ulElement.appendChild(fragment); 

With:

ulElement.insertBefore(fragment, ulElement.firstChild);

Answer 2

You can use "insertBefore". See how:

<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

Thanks for you question; My code is here:

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

I think this scheme is better.