Next Sibling Lab

Move sideways with nextElementSibling.

Starting lineup

1. Ava
2. Jordan
3. Mia
4. Noah
5. Leo
Walk the lineup sideways.

Ready.

Important HTML

Siblings share the same parent. Element siblings skip text nodes between them.

<div id="lineup">
  <div id="player-a">1. Ava</div>
  <div id="player-b">2. Jordan</div>
  <div id="player-c">3. Mia</div>
</div>

Important JavaScript

nextElementSibling is the next element; it is null at the end.

const first = document.getElementById("player-a");
const second = first.nextElementSibling;

if (second !== null) {
  second.classList.add("is-highlighted");
}