Post

노드 복제와 템플릿 Node clone, template

Posted
By songmiok
1 min read
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

window.addEventListener("load", function(){
  var notices = [
    {id:5, title:"추가한당~~~", regDate:"2019-01-26", writerId:"newlec", hit:"0"},
    {id:6, title:"복제한당~~", regDate:"2019-01-26", writerId:"newlec", hit:"0"}
  ]

  var section = document.querySelector('#section7');

  var noticeList = section.querySelector(".notice-list");
  var tbodyNode = noticeList.querySelector('tbody');

  var cloneBtn = section.querySelector(".clone-btn");
  var templateBtn = section.querySelector(".template-btn");


  cloneBtn.onclick = function(){
    var trNode = noticeList.querySelector("tbody tr");   // querySelector는 첫번째 1개만 가져온다
    var cloneNode = trNode.cloneNode(true); // false하면 껍데기만 복제한다.

    // 데이텨 교체
    var tds = cloneNode.querySelectorAll("td"); // td 5개가 셀렉된다
    tds[0].innerText = notices[0].id;
    tds[1].innerHTML = '<a href="#">' + notices[0].title + '</a>';
    tds[2].innerText = notices[0].regDate;
    tds[3].innerText = notices[0].writerId;
    tds[4].innerText = notices[0].hit;


    tbodyNode.append(cloneNode);    // 마지막에 넣는다.

  }

  templateBtn.onclick = function(){

    var template = section.querySelector("template");   // 템플릿 선택
    var cloneNode = document.importNode(template.content, true);   // 클론하지 않고, document에서 template를 임포트한다. true:전부, false:껍데기만

    // 데이텨 넣기
    var tds = cloneNode.querySelectorAll("td"); // td 5개가 셀렉된다
    tds[0].innerText = notices[0].id;

    // tds[1].innerHTML = '<a href="#">' + notices[0].title + '</a>';
    var aNode = tds[1].children[0]; // a 선택
    aNode.href = "#";
    aNode.textContent = notices[0].title;

    tds[2].innerText = notices[0].regDate;
    tds[3].innerText = notices[0].writerId;
    tds[4].innerText = notices[0].hit;


    tbodyNode.append(cloneNode);    // 마지막에 넣는다.
  }

});


참고
JavaScript
This post is licensed under CC BY 4.0 by the author.