개요
JavaScript에서 동적으로 생성한 자식 요소가 부모 요소의 CSS 스타일을 그대로 적용받도록 하려면 classList.add() 메서드와 append() 메서드를 함께 활용하면 됩니다. 먼저 document.createElement()로 새로운 div 요소를 생성한 뒤, classList.add()를 사용해 CSS 클래스(.class 선택자)를 추가하고, 이 요소를 부모 컨테이너에 추가하는 방식입니다.
주요 메서드 살펴보기
- document.createElement() – 지정한 태그 이름의 새로운 HTML 요소를 생성합니다.
- classList.add() – 생성된 요소에 하나 이상의 CSS 클래스를 추가해 스타일을 적용합니다.
- append() – 생성된 요소를 부모 컨테이너의 마지막 자식으로 삽입합니다.
예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.add-all-subject {
display: grid;
height: 100px;
width: 100px;
grid-template-columns: 2fr 2fr 2fr 2fr 2fr;
grid-template-rows: 2fr;
grid-column-gap: 5.9rem;
grid-row-gap: 2rem;
color: red;
border: 2px solid red;
}
</style>
</head>
<body>
<button onclick="saveAllSubjects()">Add Subjects</button>
<div id="add-subject">
</div>
<script>
const addSubjectArea = document.getElementById("add-subject");
function saveAllSubjects() {
const allSubject = document.createElement('div');
allSubject.classList.add('add-all-subject');
addSubjectArea.append(allSubject);
}
</script>
</body>
</html>
프로그램 실행 방법
위 프로그램을 실행하려면 파일 이름을 anyName.html(예: index.html)로 저장한 후 해당 파일을 마우스 오른쪽 버튼으로 클릭하세요. VS Code 편집기에서 Open with Live Server 옵션을 선택하면 브라우저에서 바로 결과를 확인할 수 있습니다.
실행 결과
페이지를 처음 열면 다음과 같은 초기 화면이 표시됩니다.
Add Subjects 버튼을 클릭하면 새로운 div 요소가 생성되어 부모 컨테이너에 추가되며, 다음과 같이 빨간색 테두리와 그리드 레이아웃이 적용된 박스가 나타납니다.
