JavaScript JavaScript and the DOM Traversing the DOM Solution: Using nextElementSibling

Tijo Thomas
Tijo Thomas
9,737 Points

Another solution to this problem.

Another way to solve this problem is as follows:

if (event.target.className == "down") {
    let li = event.target.parentNode;
    let nextLi = li.nextElementSibling;
    let ul = li.parentNode;
    if (nextLi) {
        ul.insertBefore(li, nextLi.nextSibling);
    }
}

This combines the insertBefore method and the nextSibling property and is referenced on the Node.insertBefore() page on MDN.

nishnash
nishnash
6,267 Points

Thanks for sharing this. this made a lot more sense to me.. Wish i thoroughly read MDN :)

9 Answers

Yiqiu Li
Yiqiu Li
11,619 Points

Thats exactly what I did, it seems more intuitive

Justin Hicks
Justin Hicks
14,290 Points

What's awesome is I read the MDN and did this exact thing

 if(event.target.className == 'down') {
    let li = event.target.parentNode;
    let nextLi = li.nextElementSibling;
    let ul = li.parentNode;
    if(nextLi) {
      ul.insertBefore(li, nextLi.nextElementSibling);
    }
  }
listUL.addEventListener('click', (e)=>{

  if (e.target.tagName.toLowerCase()==='button') {
    let li = e.target.parentNode;
    let ul = li.parentNode;

    if (e.target.className === "remove") {
      ul.removeChild(li);

    } else if (e.target.className==="up")
    {

      let prevLi = li.previousElementSibling;
      if (prevLi) {
        ul.insertBefore(li, prevLi);
      }

    }else {
      let nextLi = li.nextElementSibling;
      if (nextLi) {
        ul.insertBefore(nextLi, li);
      }
    }

  }
})
Bethany Cooksey
Bethany Cooksey
14,241 Points

I had a lot of fun with this one. :D

if (event.target.className == 'down') {
    let li = event.target.parentNode;
    let nextNextLi = li.nextElementSibling.nextElementSibling;
    let ul = li.parentNode;
    ul.insertBefore(li, nextNextLi)
  }

This is a similar solution that I done

if (event.target.className == 'down') {
    let li = event.target.parentNode;
    let nextLi = li.nextElementSibling;
    let ul = li.parentNode;
    if (nextLi) {
        let gpNextLi = li.nextElementSibling.nextElementSibling;
        ul.insertBefore(li, gpNextLi);
    }
 }
Stan Clarke Jr.
Stan Clarke Jr.
4,745 Points

I should have looked harder for a solution using insertBefore, but I came across insertAdjacentElement. Took me awhile but I got it to work.

if (event.target.className === "down") {
  let li = event.target.parentNode;
  let nextLi = li.nextElementSibling;
  let ul = li.parentNode;
  if (nextLi) {
    nextLi.insertAdjacentElement("afterend", li)
  }
}
Cosimo Scarpa
Cosimo Scarpa
14,025 Points

You need do the same but swap previousElementSibling with nextElementSibling because in this case you need invert the process.

if (event.target.className == 'down') {
   let li = event.target.parentNode;
   let nextLi = li.nextElementSibling;
   let ul = li.parentNode;
   if (nextLi) {
      ul.insertBefore(nextLi, li)
   }
}
Carlos Chang Cheng
Carlos Chang Cheng
Front End Web Development Techdegree Student 10,680 Points

Great feedback guys, me too, I think that the most basic solution was this one:

      ```js
       if(e.target.className == 'down'){
let li = event.target.parentNode;

let nextLi = li.nextElementSibling; let ul = li.parentNode; if(nextLi){ ul.insertBefore(li, nextLi.nextSibling); } } ```

Peter Csakany
Peter Csakany
3,925 Points

I had similar solution but I guess I complicated it too much.

if (event.target.className === 'down') {
      let li = event.target.parentNode;
      let nextLi = li.nextElementSibling;
      let afterNextLi = nextLi.nextElementSibling;
      let ul = li.parentNode;
      if (nextLi && afterNextLi) {
        ul.insertBefore(li, afterNextLi);
      }
      else{
        ul.appendChild(li)
      }
    }