노드 복제 하기
아래 테이블의 노드 복제하기 버튼을 누르면 맨 처음 테이블 라인이 복제된다.
관련한 키워드는 cloneNode(true) 이다.
노드 복제
아래 노드 복제하기 버튼을 누르면 테이블의 맨 위칸이 테이블 맨 아래에 복제된다.
| No | Title | Link | Subject | Level |
| 114 | 비주얼 스튜디오 코드 설치 | 바로가기 | 자바스크립트 | 중급 |
| 105 | 함수 기본 원리 | 바로가기 | 자바스크립트 | 초급 |
| 107 | 자바스크립트 계산기 | 바로가기 | 자바스크립트 | 중급 |
| 108 | DOM 제어대상 찾기 | 바로가기 | 자바스크립트 | 초급 |
POINT
- 테이블에서 복제하기 원하는 라인을 선택한다.
const tr = tbodyNode.querySelector("tbody tr");
여기서는 테이블의 첫번쨰 라인을 선택했다.
만약 다른 2번째 라인을 선택하고 싶다면, 다음과 같이 하면 된다.
const tr = tbodyNode.querySelectorAll("tbody tr")[1];
- 이렇게 선택한 라인을 복제(cloneNode)하면 된다.
const cloneTr = tr.cloneNode(true);
여기서 cloneNode(true)는 깊은 복제이고 cloneNode(false)는 얕은 복제이다.
차이는 후손까지 복제하는 지, 자신의 요소만 복제하는 지이다.
- 마지막으로 이렇게 복제한 노드를 테이블의 본문인 tBody에 apppend하면 된다.
tbodyNode.append(cloneTr); appendChild()도 가능하지만,
이건 old 버전이고 new 버전이 append() 이다.
