for loop로 정보 모두 표시하기

HTML

    <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"}
        ,{id:6, title:"JSP", regDate:"2020-09-19", writeId:"Seungmin",view:"99"}
    ]
    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");
        
        for(let i = 0; i < notices.length; i++){
            var cloneNode = trNode.cloneNode(true);
            var tds = cloneNode.querySelectorAll("td");
            tds[0].textContent = notices[i].id
            tds[1].innerHTML = '<a href ="' + notices[i].id + '">'+ notices[i].title +'</a>'
            tds[2].textContent = notices[i].regDate
            tds[3].textContent = notices[i].writeId
            tds[4].textContent = notices[i].view
            tbodyNode.append(cloneNode);
        }
    };
});

Result: