JS nextSibling & prevSibling Method

html file

<!DOCTYPE html>
<html id="main">
<head>
    <title>Basic Layout</title>
</head>
<style>
    #outer {
        width: 550px;
        height: 300px;
        padding: 10px 10px;
        margin: 0 auto;
        background: lightsalmon;
    }

    #inner {
        width: 500px;
        height: 200px;
        padding: 10px 10px;
        margin: 0 auto;
        background: mediumorchid;
    }

    #inner div {
        display: inline-block;
        background: #fff;
        width: 95px;
        height: 50px;
        line-height: 50px;
        text-align: center;
    }
</style>

<body>
    <div id="outer">
        <h2>Outer</h2>
        <div id="inner">
            <h2 id="child-head">Inner</h2>
            <div>A</div>
            <div>B</div>
            <div id="child-C">C</div>
            <div>D</div>
            <div id="child-E">E</div>
        </div>
    </div>
    <script src="js/dom-nav.js"></script>
</body>
</html>

dom-nav.js

//var a = document.getElementById("child-C").nextElementSibling;

//var a = document.getElementById("child-C").previousElementSibling;

//var a = document.getElementById("child-C").previousElementSibling.innerHTML ;

/* document.getElementById("child-C").previousElementSibling.style.background = "red";
    var a = document.getElementById("child-C").previousElementSibling.innerHTML; */

/* document.getElementById("child-C").nextElementSibling.style.background = "red";
    var a = document.getElementById("child-C").nextElementSibling;  */

//var a = document.getElementById("child-E").nextElementSibling;

//var a = document.getElementById("child-head").previousElementSibling;

//var a = document.getElementById("child-C").previousSibling;

var a = document.getElementById("child-C").nextSibling;

console.log(a);