createElement, textContent, classList, append로 문서 구조를 안전하게 변경합니다.
createElement로 요소를 만들고 textContent와 classList로 내용과 상태를 지정한 뒤 append로 문서에 넣습니다. DocumentFragment는 여러 요소를 한 번에 추가할 때 유용합니다. remove는 노드를 문서에서 분리합니다.
반복문이 HTML, CSS, JavaScript마다 li를 새로 만들어 글자를 넣고 course-item 클래스를 붙인 뒤 ul에 차례로 append합니다. 이때까지 ul은 문서 밖의 메모리에만 있어서 화면에 영향이 없고, 마지막 replaceChildren이 pre의 기존 안내 문구를 지우고 완성된 목록 하나로 바꿔 넣는 순간 세 항목이 한꺼번에 나타납니다.
이미 문서에 있는 노드를 다른 곳에 append하면 복사되지 않고 원래 자리에서 옮겨집니다. 같은 요소를 두 군데에 보여 주려면 cloneNode(true)로 자손까지 복제한 노드를 넣습니다. 또 append는 문자열과 노드를 여러 개 한 번에 받지만 appendChild는 노드 하나만 받는다는 차이가 있습니다.
사용자 입력을 innerHTML에 직접 넣으면 HTML 삽입 위험이 있습니다. 일반 텍스트는 textContent를 우선하세요.
직접 바꿔보세요마지막 li를 remove로 삭제하고 새 강좌를 앞쪽에 추가하세요.