오식랜드
[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 에 +=가 아닌 = 만 사용했다면 배열 중 제일 마지막 요소마 들어가게 될 것이다.
반응형
'dev-log' 카테고리의 다른 글
대학생 취준 포트폴리오 웹디자인 / 개발 외주 (0) | 2022.03.06 |
---|---|
[node error] Address already in use (0) | 2021.07.30 |
카카오톡 링크 미리보기 설정하기 (0) | 2021.05.27 |
카카오톡 미리보기가 안바뀔 때, og 캐시 삭제 (0) | 2021.05.27 |