-
노드 복제 cloneNodejavascript ES5 정리 2020. 9. 29. 21:06
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> <div> <input type = "button" value="복제" class="btn"> </div> <table class="table-list"> <thead> <tr> <td>번호</td> <td>이름</td> </tr> </thead> <tbody> <tr> <td>1</td> <td>오지석</td> </tr> <tr> <td>2</td> <td>오지순</td> </tr> <tr> <td>3</td> <td>오박사</td> </tr> </tbody> </table> </body> </html>js
window.addEventListener("load", function(){ var tablelist = document.querySelector(".table-list"); var tbodyNode = document.querySelector("tbody"); var btn = document.querySelector(".btn"); btn.onclick = function(){ var cloneNode = tbodyNode.cloneNode(true); tablelist.append(cloneNode); } });cloneNode()는 엘리먼트를 DOM에 복제하여 붙여넣기를 하면 동일한 기능을 수행하므로 코드를 간결하고 쉽게 만들 수 있죠. 이 함수는 생산성을 높여주는 함수로 알아두면 매우 간단하게 코드 구현이 가능합니다.
tbodyNode 엘리먼트를 복제하여 tablelist 노드에 자식으로 계속 복제하는 내용이다.
'javascript ES5 정리' 카테고리의 다른 글
다중 노드선택 방법과 일괄삭제 (0) 2020.09.30 노드 삽입(insertBefore, insertAdjacentElement), 노드 순회(firstChild, previousSibli) (0) 2020.09.29 엘리먼트 노드 추가/삭제 (0) 2020.09.29 텍스트 노드 동적 추가/삭제 (0) 2020.09.29 CSS 스타일 속성변경 (0) 2020.09.28