✏️
DOM
중급 · 선수: 17_DOM_선택과_조회
18. DOM 조작
`append` 는 여러 노드와 문자열을 한 번에 받을 수 있습니다. `prepend` 는 앞에 붙입니다.
DOM 조작createElementappendclassList
소요 시간
⏱ 약 1시간
난이도
📊 중급
선수 조건
🎯 단원 17
결과물
`append` 는 여러 노드와 문자열을 한 번에 받을 수 있습니다. `prepend` 는 앞에 붙입니다.
이 강의에서 배우는 것
- 1`createElement`, `appendChild`, `prepend`, `remove` 로 트리를 변경한다.
- 2`classList` 로 클래스를 추가/제거/토글한다.
- 3`style` 프로퍼티로 인라인 스타일을 변경한다.
- 4DocumentFragment 로 다수의 노드를 효율적으로 삽입한다.
- 5텍스트와 속성을 안전하게 설정한다.
소개
`append` 는 여러 노드와 문자열을 한 번에 받을 수 있습니다. `prepend` 는 앞에 붙입니다.
핵심 개념
1. 요소 생성과 추가
javascript
const li = document.createElement("li");
li.textContent = "새 아이템";
list.appendChild(li);`append` 는 여러 노드와 문자열을 한 번에 받을 수 있습니다. `prepend` 는 앞에 붙입니다.
2. 제거
javascript
target.remove();
parent.removeChild(target); // 구식3. classList
javascript
el.classList.add("active");
el.classList.remove("hidden");
el.classList.toggle("open");
el.classList.contains("active");`className = "..."` 는 기존 클래스를 모두 덮어쓰므로 주의합니다.
4. style
javascript
el.style.color = "red";
el.style.backgroundColor = "yellow";CSS 의 `background-color` 는 자바스크립트에서 카멜케이스 `backgroundColor` 가 됩니다.
5. DocumentFragment
많은 노드를 한꺼번에 삽입할 때 reflow 를 줄이기 위해 fragment 를 사용합니다.
javascript
const frag = document.createDocumentFragment();
for (let i = 0; i < 100; i += 1) {
const li = document.createElement("li");
li.textContent = `item ${i}`;
frag.appendChild(li);
}
list.appendChild(frag);핵심 예제
| 파일 | 다루는 내용 |
|---|---|
| index.html | 예제 HTML |
| 01_create_element.js | createElement + appendChild |
| 02_append_remove.js | append/prepend/remove |
| 03_classlist.js | classList add/remove/toggle |
| 04_style.js | style 프로퍼티 설정 |
src/01_create_element.js
javascript
/**
* createElement 로 새 요소를 만들어 목록에 추가합니다.
*/
const list = document.querySelector("#list");
const li = document.createElement("li");
li.textContent = "새 항목 (createElement)";
list.appendChild(li);
src/02_append_remove.js
javascript
/**
* append/prepend/remove 사용.
*/
const list = document.querySelector("#list");
list.append("문자열 노드", document.createElement("hr"));
const first = document.createElement("li");
first.textContent = "맨 앞 항목";
list.prepend(first);
// 일정 시간 후 첫 항목 제거
setTimeout(() => {
first.remove();
console.log("첫 항목 제거됨");
}, 1000);
src/03_classlist.js
javascript
/**
* classList 로 클래스 추가/제거/토글.
*/
const title = document.querySelector("#title");
title.classList.add("active");
const btn = document.querySelector("#btn");
btn.classList.toggle("hidden");
console.log("btn hidden?", btn.classList.contains("hidden"));
btn.classList.toggle("hidden"); // 원복
src/04_style.js
javascript
/**
* style 프로퍼티로 인라인 스타일 적용.
*/
const box = document.querySelector("#box");
box.style.color = "white";
box.style.backgroundColor = "steelblue";
box.style.padding = "12px";
box.style.borderRadius = "8px";
src/index.html
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>DOM 조작</title>
<style>
.active { color: white; background: tomato; }
.hidden { display: none; }
</style>
</head>
<body>
<h1 id="title">DOM 조작 예제</h1>
<ul id="list">
<li>기존 항목</li>
</ul>
<button id="btn">버튼</button>
<p id="box">상자</p>
<script src="01_create_element.js"></script>
<script src="02_append_remove.js"></script>
<script src="03_classlist.js"></script>
<script src="04_style.js"></script>
</body>
</html>
자주 하는 실수
- `appendChild` 에 문자열을 넘김(노드만 가능, append 는 가능).
- 반복문 안에서 매번 부모에 추가하여 성능 저하.
- `className = "x"` 로 기존 클래스 삭제.
- style 의 단위 누락(`px` 등).
- 같은 노드를 두 곳에 appendChild → 이동만 됨(복제 아님).
FAQ
Q1. appendChild 와 append 의 차이?
append 는 노드/문자열 여러 개를 받고 반환값이 없습니다. appendChild 는 노드 하나만, 추가된 노드를 반환.
Q2. classList 가 더 좋은 이유?
다른 클래스에 영향을 주지 않고 안전하게 조작할 수 있습니다.
Q3. 인라인 style 과 CSS 클래스 중 무엇을 써야 하나요?
가급적 클래스 토글, 동적 계산값(예: 좌표)만 인라인 style.
과제
버튼을 누르면 목록에 새 항목을 추가하는 페이지를 만드세요.
homework/README.md
버튼을 누를 때마다 입력창의 값을 목록 끝에 새 `<li>` 로 추가하는 페이지를 만드세요. 빈 값이면 추가하지 않습니다.
답안은 `answer/homework_01.html`, `answer/homework_01.js` 참고.
homework/answer/homework_01.html
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>과제 18-1</title>
</head>
<body>
<input id="text" type="text" placeholder="할 일" />
<button id="add">추가</button>
<ul id="todos"></ul>
<script src="homework_01.js"></script>
</body>
</html>
homework/answer/homework_01.js
javascript
/**
* 입력값을 받아 목록에 항목을 추가합니다.
*/
const input = document.querySelector("#text");
const addBtn = document.querySelector("#add");
const todos = document.querySelector("#todos");
addBtn.addEventListener("click", () => {
const value = input.value.trim();
if (!value) return;
const li = document.createElement("li");
li.textContent = value;
todos.appendChild(li);
input.value = "";
input.focus();
});
다음 단원
[19_이벤트_처리](../19_이벤트_처리/) — 사용자 인터랙션 다루기