-
노드 삽입(insertBefore, insertAdjacentElement), 노드 순회(firstChild, previousSibli)javascript ES5 정리 2020. 9. 29. 22:04
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src = "index.js"></script> </head> <body> <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> </body> </html>js
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("더이상 이동 불가"); } else{ // tbodyNode.removeChild(nextNode);//다음 노드 삭제 // tbodyNode.insertBefore(nextNode,currentNode);//nextNode 를 currentNode기준으로 앞에 삽입한다. currentNode.insertAdjacentElement("beforebegin",nextNode);//currentNode의 앞에 nextNode를 삽입한다 } }; upButton.onclick = function(){ var preNode = currentNode.previousElementSibling; if(preNode == null) { alert("더이상 이동 불가"); } else{ // tbodyNode.removeChild(currentNode);//현재노드 삭제 // tbodyNode.insertBefore(currentNode,preNode);//currentNode 를 preNode기준 앞으로 삽입한다. currentNode.insertAdjacentElement("afterend",preNode)//currentNode의 뒤에 preNode를 삽입한다. } }; });방법은 총 2가지
1.insertBefore 사용
(method) Node.insertBefore<Element>(newChild: Element, refChild: Node): Element
2.insertAdjacentElement 사용
(method) Element.insertAdjacentElement(position: InsertPosition, insertedElement: Element): Element
'javascript ES5 정리' 카테고리의 다른 글
노드 자리 교체 (0) 2020.09.30 다중 노드선택 방법과 일괄삭제 (0) 2020.09.30 노드 복제 cloneNode (0) 2020.09.29 엘리먼트 노드 추가/삭제 (0) 2020.09.29 텍스트 노드 동적 추가/삭제 (0) 2020.09.29