.nextElementSibling Testing

read only issue maybe

by SeanMF

HTML

<div class="list">Div
  <ul>ul parent
    <li id="item1">li 1</li>
    <li id="item2">li 2</li>
    <li id="item3">li 3</li>
    <li id="item4">li 4</li>
  </ul>
</div>

<p>output prev is:</p>
<p id="output"></p>
<p>output next is:</p>
<p id="output2"></p>

JavaScript

const listDiv = document.querySelector('.list');
const listUl = listDiv.querySelector('ul');
let liTwo = document.getElementsByTagName('li')[1];
// previousSibling test
let output = document.getElementById('output');
let output2 = document.getElementById('output2');

let stepOne = document.getElementById("item2");
/* let stepOne = stepOne.nextSibling; */



stepOne.nextElementSibling.style.color = "blue";

let next = document.getElementById("item2").nextElementSibling.innerHTML; 

prev.style.color = "blue";

output.innerHTML = prev;
output2.innerHTML = next;