노드삽입(insertBefore,insertAdjacentElement), 노드순회(firstElementSibling,lastElementSibling)

targetElement.insertAdjacentElement(position, Element);

Position:
'beforebegin' : Before the targetElement itself.
타겟엘리먼트 앞
'afterbegin' : Just inside the targetElement, before its first child.
타겟엘리먼트 안, 머리 쪽
'beforeend' : Just inside the targetElement, after its last child.
타겟엘리먼트 안, 꼬리 쪽
'afterend' : After the targetElement itself.
타겟엘리먼트 뒤

targetElement = p

beforebegin
<p>
----------afterbegin----------


----------beforeend----------
</p>
afterend

HTML

<section id="section8">
        <h1>Ex8-노드 삽입과 바꾸기</h1>            
        <div>                
            <input type="button" class="up-button" value="위로" />                
            <input type="button" class="down-button" value="아래로" />
        </div>
        <table border="1" class="notice-list">
            <thead>
                <tr>
                    <td>번호</td>
                    <td>제목</td>
                    <td>작성일</td>
                    <td>작성자</td>
                    <td>조회수</td>
                </tr>
            </thead>
            <tbody>
                <tr style="background: lightblue;">
                    <td>1</td>
                    <td><a href="1">자바스크립트란..</a></td>
                    <td>2019-01-25</td>
                    <td>newlec</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td><a href="2">유투브에 끌려다니지 않으려고 했는데....ㅜㅜ..</a></td>
                    <td>2019-01-25</td>
                    <td>newlec</td>
                    <td>0</td>
                </tr>
                <tr>                        
                    <td>3</td>
                    <td><a href="3">기본기가 튼튼해야....</a></td>
                    <td>2019-01-25</td>
                    <td>newlec</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td><a href="4">근데 조회수가 ㅜㅜ..</a></td>
                    <td>2019-01-25</td>
                    <td>newlec</td>
                    <td>0</td>
                </tr>
            </tbody>
        </table>
    </section>

JavaScript

//Ex-8 노드삽입과 바꾸기
window.addEventListener("load", function(){

    var section = document.querySelector("#section8");
    
    var noticeList =section.querySelector(".notice-list"); 
    var tbodyNode = noticeList.querySelector("tbody");
    var upButton = section.querySelector(".up-button");
    var downButton = section.querySelector(".down-button");

    var currentNode = tbodyNode.firstElementChild;//.children[0]

    downButton.onclick = function(){
        var nextNode = currentNode.nextElementSibling;

        if(nextNode == null){
            alert("더 이상 이동할 수 없습니다.");
            return;
        }
        //tbodyNode.removeChild(nextNode); //없어도 됨.
        //tbodyNode.insertBefore(nextNode,currentNode);
        currentNode.insertAdjacentElement("beforebegin",nextNode);

    };

    upButton.onclick = function(){
       var prevNode = currentNode.previousElementSibling;

       if(prevNode == null){
           alert("더 이상 이동할 수 없습니다.");
           return;
       }
       //tbodyNode.removeChild(currentNode);
       //tbodyNode.insertBefore(currentNode,prevNode);
       currentNode.insertAdjacentElement("afterend",prevNode);
    };

});

Result : 잘 작동함.

insertAdjacentElement라는 직관적인 method가 있으니 잘 써먹자!