[javascript] forEach를 이용하여 div 추가

<script>
var subject = [
        '반도체 공정 (A+)',
        '반도체 공정실습 (A+)',
        '박막 공학 (A+)',
        '박막 실습 (A+)',
        '반도체 물리학 (A+)',
        '반도체 소자공학 (A+)',
        'LED 공학 (A+)',
        '반도체 열역학 (A+)',
        '반도체응용기기설계 (A+)',
        '나노 전자공학 (A)',
        '디스플레이원론 (A+)',
        '전자소자재료공학 (A+)',
    ];
</script>

위의 배열에 추가하고, 삭제함에 따라 갯수대로 html에 div를 추가시키고 싶었다.

그러기 위해서는 우선 html에서 생성될 div들을 담을 부모 div를 만들어준다.

<div class="subject_wrap"></div>

subject-wrap의 하위에 div들을 추가할 것이다.

 

위의 배열을 forEach로 돌려서 부모요소에 innerHTML을 할 것이다.

appendChild가 아닌 innerHTML을 사용한 이유는... 그저 짧게 끝낼 수 있을 것 같아서^^;

 

<script>
window.addEventListener('load', (e) => {
	// 함수 실행
    makeSubject()
});


function makeSubject(){
    var subject = [
        '반도체 공정 (A+)',
        '반도체 공정실습 (A+)',
        '박막 공학 (A+)',
        '박막 실습 (A+)',
        '반도체 물리학 (A+)',
        '반도체 소자공학 (A+)',
        'LED 공학 (A+)',
        '반도체 열역학 (A+)',
        '반도체응용기기설계 (A+)',
        '나노 전자공학 (A)',
        '디스플레이원론 (A+)',
        '전자소자재료공학 (A+)',
    ];
    
    // 부모 노드 선택
    var wrap = document.getElementsByClassName('subject_wrap')[0];

	// 반복문을 통해 부모노드에 추가
    subject.forEach(e => {
        wrap.innerHTML += `<div>${e}</div>`;
    });
}
</script>

이때, wrap.innerHTML 에 +=가 아닌 = 만 사용했다면 배열 중 제일 마지막 요소마 들어가게 될 것이다.