Rearrange children orger in Javascript doesn't work multiple times

March 24, 2022

I’ve got the following code to move the childs order in an element. When I click once, it works fine, but when I click multiple times, it only works every 2nd or 3rd time.

const prevP = () => {
    const pList = document.getElementById("project-list")

    const firstProject = pList.firstChild;

    const lastProject = pList.lastChild;

    pList.insertBefore(lastProject, firstProject);
}

const nextP = () => {
    console.log("next");
    const pList = document.getElementById("project-list")

    const firstProject = pList.firstChild;

    let lastProject = pList.lastChild;

    pList.insertBefore(firstProject, lastProject);
}

<span class="material-icons md-48 close icon-btn" onclick="prevP()"
            >navigate_before</span
          >
          <div class="project-list" id="project-list">
            <div class="project">
              <img href="protfolio" alt="" />
              <p>My Portfolio 1</p>
            </div>
            <div class="project">
              <img href="protfolio" alt="" />
              <p>My Portfolio 2</p>
            </div>
            <div class="project">
              <img href="protfolio" alt="" />
              <p>My Portfolio 3</p>
            </div>
            <div class="project">
              <img href="protfolio" alt="" />
              <p>My Portfolio 4</p>
            </div>
            <div class="project">
              <img href="protfolio" alt="" />
              <p>My Portfolio 5</p>
            </div>
          </div>
          <span class="material-icons md-48 close icon-btn" onclick="nextP()"
            >navigate_next</span
          >

I also realised that sometimes the code messes up the order of the elements when using both buttons, and I have no idea why this is happening

>Solution :

The cause of that behaviour is that you use firstChild and lastChild. These may select text nodes with just some white space. Change these to firstElementChild and lastElementChild.

Secondly, the "Next" action should not insert the first element before the last element, but after it. For that you can use the method appendChild: