DOM 생성과 변경

개념 이해하기

createElement로 요소를 만들고 textContent와 classList로 내용과 상태를 지정한 뒤 append로 문서에 넣습니다. DocumentFragment는 여러 요소를 한 번에 추가할 때 유용합니다. remove는 노드를 문서에서 분리합니다.

코드를 읽을 때는 const item=document.createElement("li"); list.append(item); 부분부터 찾으세요. 현재 값과 실행 순서를 줄마다 적어 보면 문법을 외우지 않아도 결과를 예측할 수 있습니다.

사용자의 입력이나 브라우저에서 일어난 사건에 반응할 때 사용합니다. 요소가 없거나 권한이 거부되는 경우, 동적으로 추가된 요소까지 같은 흐름에서 처리하세요.

실행하기 전에 예상 결과를 짧게 적은 뒤 마지막 li를 remove로 삭제하고 새 강좌를 앞쪽에 추가하세요. 실제 출력이 다르면 콘솔에 처음 나타난 오류와 그 직전 값을 차례로 확인하세요.