JAVASCRIPT만으로 화면 구현하기(innerHTML)

javacript로 원래없던 태그를 추가하고 클래스를 부여 합계와 평균값을 추가해서 사용자에게 보여주기

 

    <div id="root"></div>

    <script>
 		// 위 html태그중 id = root안에 태그를 넣을거라서 불러와준다.
        const root = document.getElementById('root')
        const arr = [
            { name: '이지은', kor: 100, eng: 99, mat: 87 },
            { name: '홍진호', kor: 22,  eng: 22, mat: 22 },
            { name: '유재석', kor: 95,  eng: 92, mat: 97 },
            { name: '신동엽', kor: 100, eng: 84, mat: 92 },
            { name: '강호동', kor: 85,  eng: 62, mat: 75 },
            // 보이는바와 같이 국어 수학 영어점수만있고 합계와 평균은 없는 상태
        ]

        arr.forEach(dto => {
        	// 합계와 평균값을 구하여 놓고
            const sum = dto.kor + dto.eng + dto.mat
            const avg = (sum / 3).toPrecision(4)
            
            const item = document.createElement('div')
            // div태그 생성 <div></div>
            
            item.className = 'item'
            // 클래스 부여 <div calss="item"></div>
            
            item.innerHTML += `<div class="name">${dto.name}</div>`
            // 	<div calss="item">
            //		<div class="name">${dto.name}</div>
            //	</div> 
            // 위와같은 형태로 밑에도 똑같이 들어갈것이다.
            item.innerHTML += `<div class="kor">${dto.kor}</div>`
            item.innerHTML += `<div class="eng">${dto.eng}</div>`
            item.innerHTML += `<div class="mat">${dto.mat}</div>`
            item.innerHTML += `<div class="sum">${sum}</div>`
            item.innerHTML += `<div class="avg">${avg}</div>`

            root.appendChild(item)
            // 이후 root안에 넣어주며 하나의 row가 완성되고 
            // 그 행에는 이름, 과목별점수,합계, 평균이 입력되게 된다.
        })
    </script>