노드 복제 & 템플릿 복제

1. 기존에 있는 게시물을 활용한 복제

    <section id="section7">
        <h1>Ex7-노드 복제와 템플릿 태그</h1>
        <div>
            <input type="button" class="clone-button" value="복제">
            <input type="button" class="template-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>
                    <td>1</td>
                    <td><a href="1">javascript</a></td>
                    <td>2019-01-25</td>
                    <td>seungmin</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td><a href="2">HTML</a></td>
                    <td>2019-01-25</td>
                    <td>seungmin</td>
                    <td>6</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td><a href="3">Python</a></td>
                    <td>2019-01-25</td>
                    <td>seungmin</td>
                    <td>4</td>
                </tr>
            </tbody>
        </table>
    </section>

JavaScript

window.addEventListener("load", function () {
    var notices = [
        {id:4, title:"C++", regDate:"2020-07-19", writeId:"Seungmin",view:"9"}
        ,{id:5, title:"Ruby", regDate:"2020-09-19", writeId:"Seungmin",view:"10"}]//복제할 정보
    var section = document.querySelector("#section7");

    var noticeList = section.querySelector(".notice-list")
    var tbodyNode = noticeList.querySelector("tbody");
    var cloneButton = section.querySelector(".clone-button");
    var templateButton = section.querySelector(".template-button");

    cloneButton.onclick = function () {
        var trNode = noticeList.querySelector("tbody tr"); //tbody안의 tr태그 선택
        var cloneNode = trNode.cloneNode(true);
        //false: 껍데기만 복제, true: duplicate 부모,자손 다 복제
        var tds = cloneNode.querySelectorAll("td");
        
        tds[0].textContent = notices[0].id
        tds[1].innerHTML = '<a href ="' + notices[0].id + '">'+ notices[0].title +'</a>'
        tds[2].textContent = notices[0].regDate
        tds[3].textContent = notices[0].writeId
        tds[4].textContent = notices[0].view
        
        tbodyNode.append(cloneNode);
    };

2. 미리 만든 template을 활용한 복제

    <section id="section7">
        <h1>Ex7-노드 복제와 템플릿 태그</h1>
        <div>
            <input type="button" class="clone-button" value="복제">
            <input type="button" class="template-button" value="템플릿 복제">
        </div>
        <template>
            <td></td>
            <td><a href=""></a></td>
            <td></td>
            <td></td>
            <td></td>
        </template>
        <table border="1" class="notice-list">
            <thead>
                <tr>
                    <td>번호</td>
                    <td>제목</td>
                    <td>작성일</td>
                    <td>작성자</td>
                    <td>조회수</td>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </section>

window.addEventListener("load", function () {
    var notices = [
        {id:4, title:"C++", regDate:"2020-07-19", writeId:"Seungmin",view:"9"}
        ,{id:5, title:"Ruby", regDate:"2020-09-19", writeId:"Seungmin",view:"10"}
    ]
    var section = document.querySelector("#section7");

    var noticeList = section.querySelector(".notice-list");
    var tbodyNode = noticeList.querySelector("tbody");
    var cloneButton = section.querySelector(".clone-button");
    var templateButton = section.querySelector(".template-button");
    
    templateButton.onclick = function () {
        var template = section.querySelector("template");
        var cloneNode = document.importNode(template.content,true);
        var tds = cloneNode.querySelectorAll("td");
        
        tds[0].textContent = notices[0].id
        tds[1].innerHTML = '<a href ="' + notices[0].id + '">'+ notices[0].title +'</a>' //a태그를 포함시켜야 하기때문에 innerHTML사용
        tds[2].textContent = notices[0].regDate
        tds[3].textContent = notices[0].writeId
        tds[4].textContent = notices[0].view
        
        tbodyNode.append(cloneNode);
    };

clondNode.querySelector(true); //false: 껍데기만 복제, true: duplicate 부모,자손 다 복제
document.importNode(a.content,true); //clone과 기능은 거의 동일