Dynamically changed list doesn't work as expected - pure js needed

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.