간단한 방명록 기능을 만들어보았다.

html 코드 및 화면

 <h3>간단한 방명록 만들기</h3>
    <label for="">작성자<input type="text" id="writer"></label>
    <label for="">내용<input type="text" id="content"></label>
    <button onclick="commitMe()">작성하기</button>
    <table border="1" cellspacing="1" cellpadding="20">
        <thead>
            <th>순서</th>
            <th>작성자</th>
            <th>내용</th>
            <th>작성일</th>
        </thead>
        <tbody></tbody>
    </table>

방명록

작성자: 내용: 작성하기

순서	작성자	내용	작성일

1. 작성자, 입력하고 싶은 내용을 적는다.
2. 작성하기 버튼 클릭 시
3. 테이블 태그 밑으로 tr과 td가 각 위치에 맞게 생성된다 - createElement 사용

자바스크립트 코드

 <script>
 	const commitMe = () => {
    	let who = document.querySelector('#writer').value;
        let cnt = document.querySelector('#content').value;
        let tbody = document.querySelector('tbody');
        let date = new Date();

        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
        let hours = date.getHours();
        let mins = date.getMinutes();

        let newtr = document.createElement('tr');
        let td1 = document.createElement('td');
        let td2 = document.createElement('td');
        let td3 = document.createElement('td');
        let td4 = document.createElement('td');

        td1.textContent = tbody.children.length;
        td2.textContent = who;
        td3.textContent = cnt;
        td4.textContent = `${year}-${month}-${day} : ${hours}:${mins}`;

        tbody.appendChild(newtr);
        newtr.appendChild(td1);
        newtr.appendChild(td2);
        newtr.appendChild(td3);
        newtr.appendChild(td4);
     }
 </script>

• 좀 더 깔끔하게 코드를 정리하고 싶어 아래 처럼 다시 수정을 해봤다.

 <script>
        const commitMe = () => {
           let who = document.querySelector('#writer').value;
           let cnt = document.querySelector('#content').value;
           let tbody = document.querySelector('tbody');
           let date = new Date();
   
           let newtr = document.createElement('tr');
           let td1 = document.createElement('td');
           let td2 = document.createElement('td');
           let td3 = document.createElement('td');
           let td4 = document.createElement('td');
   
           td1.textContent = tbody.children.length;
           td2.textContent = who;
           td3.textContent = cnt;
           td4.textContent = `${date.getFullYear()}-${date.getMonth() + 1} -${date.getDate()} : ${date.getHours()}:${date.getMinutes()}`;
   
           tbody.append(newtr);
           newtr.append(td1, td2, td3, td4);
        }
    </script>

appendChild()를 사용해서 td의 내용을 추가했는데 append()로 수정해서 td의 추가 내용을 한꺼번에 넣을 수 있었다.

td4(작성일)의 경우에는 바뀌는 값이 아니라서 바로 textContent안에 입력함으로써 코드 몇줄을 줄일 수 있었다.

append() 와 appendChild()의 차이

두 메서드는 부모 노드에 자식 노드를 추가한다는 점에서 동일한 특징을 갖지만 몇가지 차이점이 있다. 가장 큰 차이는 자식 노드를 한번에 하나씩 추가와 여러개를 한번에 추가할 수 있는지 여부에 있다.

append() : 한 번에 여러 노드 추가 및 텍스트도 넣을 수 있다.
appendChild() : 한 번에 한 개의 노드만 추가 가능

결론

• 계산기와 방명록은 코드를 외우면서 연습할 수 있었는데 현재 상태에서 기능이 추가 되거나 완전히 다른 스크립트 페이지를 만들기 위해서는 기본 원리를 이해하고 왜 사용하는지를 알아야 할 것이다.
• 불필요하고 중복된 코드를 정리하는 습관을 가질 수 있도록 연습이 필요함.