728x90
노드의 복사
var node = document.importNode('복제 원하는 노드', boolean : 자식 노드 포함 여부);
반환 : [True인경우 : 자식 포함], [False인 경우 : 자식 미포함]
샘플 예제 ↓
[HTML]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>노드의 복사 예제</title>
<style>
table {
border-collapse: collapse;
margin : 20px;
text-align :center;
}
table td {
border : 1px solid grey;
padding : 6px 12px;
}
</style>
</head>
<body>
<template>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</template>
<table>
<thead>
<tr>
<td>번호</td>
<td>제목</td>
<td>내용</td>
</tr>
</thead>
<tbody></tbody>
</table>
<script src="importNode.js"></script>
</body>
</html>
[Javascript]
let temp = document.querySelector('template');
let tbody = document.querySelector('tbody');
//데이터 SET
let db = [
{'id':'1','title':'title1','content':'content1'},
{'id':'2','title':'title2','content':'content2'},
{'id':'3','title':'title3','content':'content3'}
];
//테이블 내용 생성
for (let i = 0; i < db.length; i++) {
//TR (자식노드 까지 복사)
let copyAllChild = document.importNode(temp.content,true).firstElementChild;
copyAllChild.children[0].innerText = db[i].id;
copyAllChild.children[1].innerText = db[i].title;
copyAllChild.children[2].innerText = db[i].content;
tbody.append(copyAllChild);
}
[출력 결과 창]
document.importNode(복사할노드, boolean:자식포함여부)는
위와같은 table 생성에 자주 사용되니 꼭 알아둘것!!
728x90
'프론트엔드 > Javascript' 카테고리의 다른 글
| [Javascript] 이벤트 트리거 (Event Trigger) .dispatchEvent() (0) | 2021.02.02 |
|---|---|
| [Javascript] 기본 이벤트 삭제 event.preventDefault() (0) | 2021.02.01 |
| [Javascript] 부모 태그 찾기 .parentElement (0) | 2021.01.31 |
| [Javascript] ClassList .contains/.add/.remove/.toggle (0) | 2021.01.31 |
| [Javascript] 이벤트 Event (0) | 2021.01.31 |
댓글